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.

Components
1
Button container
2
Button text
Details
3
Icon

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