Icon button
Updated:
March 15, 2020
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.
Normal icon button
The normal styled version should be the most used in the interface. This is the standard state of the component.
Normal icon button
The normal styled version should be the most used in the interface. This is the standard state of the component.
Raised icon button
The raised styled version should only be used for preferred actions.
Raised icon button
The raised styled version should only be used for preferred actions.
Normal icon button with label
The normal styled version should be the most used in the interface. This is the standard state of the component.
Normal icon button with label
The normal styled version should be the most used in the interface. This is the standard state of the component.
Raised icon button with label
The raised version should only be used for preferred actions.
Raised icon button with label
The raised version should only be used for preferred actions.
Component building blocks
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 and styles
The icon button can displayed in both normal and raised style.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
States
The look of the states are defined by the style.
