Overview
An action icon is a clickable element that is used to trigger an action by the user. It works as a more minimal version of a button that uses only an icon to signify its meaning, which can be useful when space in a layout is limited.
Action icons are used to display common patterns that are self-explanatory and do not require extra copy to clarify.
Action icon used to edit an ite
When to use
Use action icons only for common patterns and generic actions that can be easily understood by users without the need of button copy, tooltips or other explanations. For example, that could be editing, downloading or sharing an item within a table where it’s clear what the item is and what the action would lead to.
If the action of the component isn’t clear enough on its own, consider using a normal button with copy.
Action icons can be used either on their own, or in combinations with other buttons when the interaction they signify is of lower priority, compared to the primary button.
Use of Tooltips
Each action icon has a tooltip enabled by default, which is available on hover. The tooltip can clarify the action the component would take, but should not be necessary to its understanding, as hover states are not available on all devices.
Action icon with a tooltip
Types of action icons
Action icons have several different variations in terms of appearance, shape and theme in order to match the buttons used next to them.
By appearance
Action icons have three variants in terms of appearance, similarly to the normal buttons, which should be used based on the importance of the action within the context of the page.
When used on its own, the action icon can use the Solid variant if it’s the primary action within that part of the layout. If it signifies a secondary action or is used in a combination with other buttons, it should use the Outline or Simple variants.
Action icon solid, outline, simple
By shape
Action icons can be rounded or non-rounded, depending on the styling of the other components they’re used around.
The non-rounded variant can be used when the action icon is positioned next to a normal button or other components, while the rounded one can be used when the icon is on its own without other rectangular components nearby.
Icons
Action icons should only use icons that are a part of Atom’s design system and no other graphics or typography. The selected icons should have clear meanings and make sense in the context of the page and the other components around them.
Do's and Don'ts
Do
Use an icon that follows common patterns known by users within each app
Don't
Use icons that have abstract meanings within the page they’re used in
Do
Use the appropriate variant of the action icon that fits the component hierarchy of your layout
Don't
Use the appropriate variant of the action icon that fits the component hierarchy of your layout