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.
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 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.
Anatomy
The app button is built up by a container with an icon, and a label on the large version.
Colors
The app button uses the raised style.
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.
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.
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.
Enabled
Button container
style-raised-enabled
Hover
Button container
style-raised-hover
Pressed
Button container
style-raised-pressed
Focused
Button container
style-raised-focused
Disabled
Button container
style-raised-disabled
Button text
color-ui-element-disabled