Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Lead:  Asaf Ben-Oved 

Table of Contents

Description

Used for toolbars and displays where words won’t comfortably fit alongside icons.

May also be used as a menu button.

See example:

...

Image Added

Usage & Behaviour

General guidelines

...

State

Icon Button

Icon Button + label

Icon Menu Button

Regular

Image RemovedImage AddedImage RemovedImage Added

Hover

Image RemovedImage AddedImage RemovedImage Added

Active

Image RemovedImage AddedImage RemovedImage Added

Disabled

Image RemovedImage AddedImage RemovedImage Added

Focused

Image RemovedImage AddedImage RemovedImage Added

Focused + Hover

Image RemovedImage AddedImage RemovedImage Added

Focused + Active

Image RemovedImage AddedImage RemovedImage Added

Focused + Disabled

Image RemovedImage AddedImage RemovedImage Added

Interaction

Clicking on the button will either initiate an action or set the button to an active state (in toggle icon buttons)

...