Lead: Rakefet Zur (Unlicensed) ONGOING
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)
...
For icons with text See Buttons#Labels
States
| State | Button | Button + text | Menu |
|---|---|---|---|
| Regular | |||
| Hover | |||
| Active | |||
| Disabled | |||
| Focused | |||
| Focused + Hover | |||
| Focused + Active | |||
| Focused + Disabled |
Interaction
For single action button, clicking on the icon will either carry an action or set the button in active state.
If the button is in Active state, clicking again will return to regular (except toggle icon).
Toggle buttons :
- can act bit different by switching between 2 connected icons
- Do not have Disabled or Active state but only Hover
Best practices
Only use when the Icon’s meaning is unambiguous.
Consider pairing with a Tooltip to describe the Icon’s underlying action
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
See general guidelines described in Keyboard & Focus Management Guidelines>>
Contrast & size compliance
Minimum icon size is 16px. Icons with text should comply with the minimal of Contrast + Font Size Guidelines
Design
Zeplin link | Screen thumbnail |
|---|---|
| https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5b83c43e558bb3055d8064f9 |  |
Code
<<a box containing the code - discuss with Femi>>