Lead: Asaf Ben-Oved
Description
Icon buttons are used where Dialog Buttons won’t comfortably fit, such as toolbars, menus, and tables.
 |
Types
Type | Usage |
Icon buttons (standard) | Performs a single action, as a normal button. |
Toggle icon buttons | On click, toggles between two opposite states. |
Usage & Behaviour
General guidelines
Structure
When used with a label, the icon should be placed on the left of the label. (For right-to-left languages, the icon should be on the right).
Content
As per the main Buttons information.
Internal logic
When no label is shown, a tooltip should be used.
States
State | Icon Button | Icon Button + label | Icon Menu Button |
|---|---|---|---|
Regular |  |  |  |
Hover |  |  |  |
Active |  |  |  |
Disabled |  |  |  |
Focused |  |  |  |
Focused + Hover |  |  |  |
Focused + Active |  |  |  |
Focused + Disabled |  |  |  |
Interaction
Clicking on the button will either:
trigger an action, or
(for toggle buttons) switch between opposite states.
Toggle icon buttons
Have 2 distinct, opposite actions.
Clicking on the icon will toggle between its states.
Example:
 | A locked icon, when clicked… |
 | … turns into an unlocked icon. |
Tooltips for toggle icon buttons should detail the next available action. Example:
 | The tooltip in the locked state would be Unlock. |
Best practices
Use:
when the icon’s meaning is unambiguous. (Consider pairing with a Tooltip to describe the icon button’s underlying action).
Don’t use:
icons only, when there is enough space to add labels.
Separate groups of icons with a vertical separator |.
Design
Zeplin link | ||
|---|---|---|
 |  |  |