Standard button

Standard buttons indicates an instant action, preformed with a single click.

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.

Standard button

The labeled icon button should be used for functions that is non-conventional. Use the label button the most.

Normal

The normal button are the most regularly used variant.

Raised

The raised button shall only be used when you want to highlight a preferred action.

Standard button with icon

The labeled icon button should be used for functions that is non-conventional. Use the label button the most.

Normal

The normal button are the most regularly used variant.

Raised

The raised button shall only be used when you want to highlight a preferred action.

Specs

How the standard button, with and without icon, are built up and styled.

Anatomy

The standard button is built up by a container and a textbox. The icon is optional.

Components
1
Button container
2
Button text
Details
3
Icon

Colors

The button container, textbook and icon colors depends on wether it is a normal button or a raised button.

Normal button

Element
Color / Style name
1
Button container
style-normal
2
Button text
color-ui-element-active
3
Icon color
color-ui-element-neutral
Bright palette

Raised button

Element
Color / Style name
1
Button container
style-raised
2
Button text
color-ui-element-active-inverted
3
Icon color
color-ui-element-active-inverted
Bright palette

Typography and icons

The standard button use the button text, and have the option to be displayed with an icon associated with the button text.

Text category
Text attributes
1
Button
Aa
Typeface: Open Sans
Weight: Semi Bold
Size: 16px

Measures and spacing

The standard button has a min-width to make the button shape consistent. Try to keep related buttons the same width to show relation.

1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Normal button
Enabled
Button container
style-normal-enabled
Hover
Button container
style-normal-hover
Pressed
Button container
style-normal-pressed
Focused
Button container
style-normal-focused
Disabled
Button container
style-normal-disabled
Button container
color-ui-element-disabled
Raised button
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