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://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bc80071b86e9f71812_01%20Normal.png)
App button with label
The app button with label is used in the application launcher and full-screen application launchers.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c3ace5c7648876e41c_01%20Normal.png)
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://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c7152e6f0c830eecbb380_AppButton_Specs.png)
Anatomy
The app button is built up by a container with an icon, and a label on the large version.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c715080071b69a0f6de08_AppButton_Colors.png)
Colors
The app button uses the raised style.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c715080071b69a0f6de08_AppButton_Colors.png)
Element
Color / Style name
1
Button container
style-raised-enabled
2
Button text
color-on-background-active
3
Icon color
color-on-primary-active
Typography and icons
The name of the application is the the label.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c7153055861924a1ba454_AppButton_Typography.png)
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://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c71514b0051bb7592a846_AppButton_MeasuresAndSpacing.png)
1
Component measures
2
Spacing
3
Border sizes
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c71510558615d341ba453_AppButton_Shortcut_MeasuresAndSpacing.png)
1
Component measures
2
Spacing
3
Border sizes
States
The look of the states are defined by the style.
Enabled
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bc80071b86e9f71812_01%20Normal.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c3ace5c7648876e41c_01%20Normal.png)
Button container
style-raised-enabled
Hover
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bc0558613aa81bc806_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c3e6f0c88581cbe8d6_02%20Hover.png)
Button container
style-raised-hover
Pressed
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bdc968677dff839bc2_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c4ace5c7184f76e420_03%20Pressed.png)
Button container
style-raised-pressed
Focused
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bec968675e32839beb_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c54b0051e8fa92ccb9_04%20Focused.png)
Button container
style-raised-focused
Disabled
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73bf4b0051c65892cc84_05%20Disabled.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c73c5ace5c7a6c476e421_05%20Disabled.png)
Button container
style-raised-disabled
Button text
color-on-background-disabled