Icon button

The icon button is used for actions and tools in the interface. It works best when it is a clear association between the icon and the action.

Variations

The icon button can be with or without a label.

Icon button with label

The labeled icon button should be used for functions that is non-conventional. Use the label button the most.

Normal

The normal styled version should be the most used in the interface. This is the standard state of the component.

Raised

To highlight a preferred action, use a raised styled version.

Icon button

The icon button should only be used for functions with a conventional icon, like "back", "Mute" or "Play / Pause".

Normal

The normal styled version should be the most used in the interface. This is the standard state of the component.

Raised

To highlight a preferred action, use a raised styled version.

Specs

The next steps explains how the icon button in both versions are built up and styled.

Anatomy

Both versions of the icon button is built up by a container and a centered icon. The only difference between them is the label.

Components
1
Button container
2
Icon
3
Label

Colors

The icon button can displayed in both normal and raised style.

Element
Color / Style name
1
Button container
style-normal
2
Icon color
color-ui-element-neutral
3
Text color
color-ui-element-active
Element
Color / Style name
1
Button container
style-raised-enabled
2
Icon color
color-on-primary-active
3
Text color
color-on-backgorund-active

Typography

The label text describes the button.

Text category
Text attributes
1
Label
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
Line height: 24px

Measures and spacing

The measures of the button container and icon are the same for both versions (with or without label).

1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Normal icon button
Enabled
Thumb
style-normal-enabled
Hover
Thumb
style-normal-hover
Pressed
Thumb
style-normal-pressed
Focused
Button container
style-normal-focused
Disabled
Button container
style-normal-disabled
Button text
color-ui-element-disabled
Raised icon button
Enabled
Thumb
style-raised-enabled
Hover
Thumb
style-raised-hover
Pressed
Thumb
style-raised-pressed
Focused
Button container
style-raised-focused
Disabled
Button container
style-raised-disabled
Button text
color-ui-element-disabled