Lead: Asaf Ben-Oved
| Table of Contents |
|---|
Description
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)
Content
For icons with text see guidelines of Buttons#Labels
Internal logic
Toggle icon buttons are used for both action and states reference.
When no label presented, show a tooltip.
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 icon buttons)
...
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
...
Separate groups of icons by a vertical separator “|”
Design
Zeplin link | ||
|---|---|---|
 |  |  |
Code
<<a box containing the code - discuss with Femi>>