Interaction Icon
Description
The Interaction Icon component is a versatile, minimalist element primarily used to represent actions or functionalities visually through icons. By default, it appears as an icon without a background, making it suitable for non-intrusive UI elements. When interacted with—via hover or active states—it adopts visual cues similar to the Button component, gaining a colored, rounded background to indicate interactivity. This makes it ideal for use in toolbars, action lists, or any interface where concise, accessible feedback is needed.
Usage
HTML Element: An interaction icon must be either a button or a link (a)
States: Make sure all states are defined and their respective look and behavior doesn't break your design
Keyboard Support: Ensure the icon can be activated using the Enter or Space keys when implemented within a button. Include a visible focus indicator for keyboard navigation.