Lead: Asaf Ben-Oved
| Table of Contents |
|---|
Description
...
Type | Usage |
Icon buttons (standard) | Performs a single action, as a normal button. |
Toggle icon buttons | On click, toggles Toggles between two opposite states. |
...
When used with a label, the icon should be placed on the left side of the label. (For right-to-left languages, the icon should be on the right).
...
As per the main Buttons information. See Icon library.
Internal logic
When no label is shown, a tooltip should be usedshown on hover.
States
State | Icon Button | Icon Button + label | Icon Menu Button |
|---|---|---|---|
Regular |  |  |  |
Hover |  |  |  |
Active |  |  |  |
Disabled |  |  |  |
Focused |  |  |  |
Focused + Hover |  |  |  |
Focused + Active |  |  |  |
Focused + Disabled |  |  |  |
Interaction
On standard icon buttons:
Clicking
...
the button
...
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 triggers the action.
On toggle icon buttons:
clicking the button switches 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.
General
Separate groups of icons with a vertical separator
...
.
Design
Zeplin link | ||
|---|---|---|
 |  |  |
...