Button Icons
Button Icons are used for minor actions that can be resumed within one icon.
- Overview
- Specs
- Guidelines
Component
Button icons are used to be displayed within compact layouts, where the desired action can be resumed in one icon and unambiguously.
Button icons can be represented with the colors theme, grey and error. Alongside it can be combined with the variations primary, secondary, tertiary and text button. This component follows the same color states as the buttons.
A: Primary variation
B: Secondary variation
C: Tertiary variation
D: Text Button variation
1: Icon
Used for:
Action bar options
Used to provide quick access to frequent actions, such as print and attach;
Sorting and filtering
Enable users to sort and group by columns inside the data-grid pattern;
Messaging actions
Used to represent a send button without taking to much place;
File management
Complete the process of uploading files or media, either for accepting or canceling the media attached;
Don’t use for:
Insufficient visual cues
It’s not recommended to use button icons when the meaning of the icons is not immediately clear or intuitive;
Accessibility concerns
Do not use button icons to display primary information such as “Save”, in order to maintain the base functionality for persons using a screen reader. Consider using buttons instead;
Overreliance on icons
Avoid overreliance on button icons for critical actions, especially when users may be unfamiliar with the meaning of the icons;
Inconsistent iconography
If the iconography used in button icons is inconsistent or lacks standardization across the interface, users may struggle to interpret their meaning consistently;
Demo
Access the Figma file and inspect element using Dev Mode.
Last Update
- Updated state color variables;
- Reduced color variables;
