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.

Component elements
1
Container
2
Stepper Container
3
Label

Colors and styles

The app button uses the raised style.

Element
Color / Style name
1
Container
style-raised
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-raised
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-raised
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-raised
This is some text inside of a div block.
This is some text inside of a div block.
2
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Label
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Label
Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Label

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

App button
Component state
Element
Style
Enabled
Container
style-raised-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Container
style-raised-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Container
style-raised-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Container
style-raised-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Container
style-raised-disabled
Icon and label
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Submit feedback