Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
Use Used for toolbars and displays where words won’t comfortably fit alongside icons.
May also be used as a menu button
See example:
...
Usage & Behaviour
General guidelines
...
Structure
When used with a label, the icon will be positioned left to the label (depends on language direction)
...
For icons with text see guidelines of Buttons#Labels
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
...
initiate an action or set the button
...
to an active state (
...
in
...
toggle buttons)
If the button is in Active state, clicking again will return to regular (except toggle icon)the previous state
Toggle buttons
Can act differently by switching between 2 connected icons
Can be either Active or disabled
Unlike the regular icon button their Active state is Black. Disabled state is the same as all icon buttons
clicking on the icon will toggle between its actions
Can have 2 distinct (or opposite) actions
For example, a lock icon when clicked uponTurns to an “unlock” icon
Tooltips for icon toggle buttons will present the next available action.
For example, the tooltip for lock would be "Unlock".
Best practices
...
Use:
when the Icon’s meaning is unambiguous.
Consider pairing with a Tooltip to describe the Icon’s underlying action
...
Just icons when there is enough space to add labels
Separate groups of actions by a vertical separator “|”
Design
Zeplin link | ||
|---|---|---|
 |  |  |
...