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.
The normal styled version should be the most used in the interface. This is the standard state of the component.
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".
The normal styled version should be the most used in the interface. This is the standard state of the component.
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.
Colors
The icon button can displayed in both normal and raised style.
Typography
The label text describes the button.
Measures and spacing
The measures of the button container and icon are the same for both versions (with or without label).
States
The look of the states are defined by the style.
