App button
Updated:
March 15, 2020
The app button is a shortcut to open an application.
Variations
The app button can be displayed with or without a label. The most used version is the app button with a label. App shortcuts, the app button without a label is used in the top bar.


App button with label
The app button with label is used in the application launcher and full-screen application launchers.

App button with label
The app button with label is used in the application launcher and full-screen application launchers.


App shortcut
The app shortcut is smaller and do not have a label under the icon. It is used in the topbar.

App shortcut
The app shortcut is smaller and do not have a label under the icon. It is used in the topbar.
Component building blocks
How the app button, with and without a label, are built up and styled.
Anatomy
The app button is built up by a container with icon and label on the large version.


Colors and styles
The app button uses the 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.









