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.

Text

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>>

Icon button