...
...
...
...
...
...
...
...
...
...
Lead: Asaf Ben-Oved ONGOING
| Table of Contents |
|---|
Description
Use for toolbars and displays where words won’t comfortably fit alongside icons.
May also be used as a menu button.
...
Usage & Behaviour
General guidelines
For toolbars of multiple Icons use a Button Group (with a vertical line separator)
Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.
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
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 carry an action or set the button in active state (
as in ribbon)If the button is in Active state, clicking again will return to regular (except toggle icon)
Toggle buttons
Can
...
act differently by switching between 2 connected icons
Can be either Active or disabled
Unlike regular icon button their Active state is Black. Disabled state is the same as all icon buttons
Tooltips for icon toggle buttons will present the next available action.
For example, the tooltip
...
for lock
...
would be "Unlock".
Best practices
Only use when the Icon’s meaning is unambiguous.
Consider pairing with a Tooltip to describe the Icon’s underlying action
Design
Zeplin link | ||
|---|---|---|
...
...
...
 |
Code
<<a box containing the code - discuss with Femi>>