Lead:  Asaf Ben-Oved ONGOING

Description

Use 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

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

• Use a vertical separator for groups of actions to separate by meaning

Use:

• when the Icon’s meaning is unambiguous.

• Consider pairing with a Tooltip to describe the Icon’s underlying action

Don’t use:

• Just icons when there is enough space to add labels

Design

Zeplin link
Icon	Icon with label	Icon Menu

Code

<<a box containing the code - discuss with Femi>>