App button
The app button is a shortcut to open an application.
Variations
The standard button can be used in a normal and raised version, each with an option to use icon in addition to the label.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548c9ab00c28b_01%20Normal.webp)
App button with label
The app button with label is used in the application launcher and full-screen application launchers.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548001f00c277_01%20Normal.webp)
App shortcut
The app shortcut is smaller and does not have a label under the icon. It is used in the topbar.
Specs
How the app button, with and without a label, are built up and styled.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa554849cd00c278_AppButton_Specs.webp)
Anatomy
The app button is built up by a container with an icon, and a label on the large version.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548767e00c287_AppButton_Colors.webp)
Colors
The app button uses the raised style.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548767e00c287_AppButton_Colors.webp)
Element
Color / Style name
1
Button container
style-raised
2
Button text
color-ui-element-active
3
Icon color
color-ui-element-active-inverted
Typography and icons
The name of the application is the the label.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa554870a000c28f_AppButton_Typography.webp)
Text category
Text attributes
1
Label
Aa
Typeface: Open Sans
Weight: Regular
Size: 12px
Lineheight: 24px
Measures and spacing
The app button is built up by a circular container with a centered icon.
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548360d00c2a0_AppButton_MeasuresAndSpacing.webp)
1
Component measures
2
Spacing
3
Border sizes
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa55483bbc00c290_AppButton_Shortcut_MeasuresAndSpacing.webp)
1
Component measures
2
Spacing
3
Border sizes
States
The look of the states are defined by the style.
Enabled
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548c9ab00c28b_01%20Normal.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548001f00c277_01%20Normal.webp)
Button container
style-raised-enabled
Hover
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548de4e00c28d_02%20Hover.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa55482a3a00c279_02%20Hover.webp)
Button container
style-raised-hover
Pressed
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa55483fac00c264_03%20Pressed.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa55484ad300c267_03%20Pressed.webp)
Button container
style-raised-pressed
Focused
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548737300c260_04%20Focused.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa5548362100c268_04%20Focused.webp)
Button container
style-raised-focused
Disabled
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa55483d8700c2a1_05%20Disabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548db6900c16c/5e15a495fa554833e500c29b_05%20Disabled.webp)
Button container
style-raised-disabled
Button text
color-ui-element-disabled