Lead: Asaf Ben-Oved
| Table of Contents |
|---|
Description
Used for toolbars and displays where words Icon buttons are used where Dialog Buttons won’t comfortably fit alongside icons.
May also be used as a menu button.
See example:
...
, such as toolbars, menus, and tables.
...
Types
Type | Usage |
Standard | Performs a single action, as a normal button. |
Toggle | On click, toggles between active and inactive states. |
Usage & Behaviour
General guidelines
...
When used with a label, the icon will should be positioned placed on the left to of 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. (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 |  |  |  |
...
Clicking on the button will either initiate :
trigger an action
...
If the button is in Active state, clicking again will return to the previous state, or
(for toggle buttons) switch between opposite states.
Toggle icon buttons
clicking Have 2 distinct, opposite actions.
Clicking on the icon will toggle between its actionsCan have 2 distinct (or opposite) actionsstates.
Example:
 | For example, a lock icon when clicked uponA locked icon, when clicked… |
 | Turns to an “unlock” icon… turns into an unlocked icon. |
Tooltips for icon toggle buttons
...
should detail the next available action. Example:
 | For example, the tooltip for lock 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’s icon button’s underlying action).
Don’t use:
Just icons Icons only, when there is enough space to add labels.
Separate groups of icons by with a vertical separator “ |”.
Design
Zeplin link | ||
|---|---|---|
 |  |  |
...