Toggle button

A toggle button is a selection control the user can pick one of multiple options. It is mostly used for 2 to 5 options.

Variations

The menu button can be used in three different variations:

Standard toggle button

The standard toggle button has a descriptive label.

Icon toggle button

The icon toggle button the label below the button, and an associated icon centred in the toggle button.

Specs

The next steps explains how all three types of the menu button are built up and styled.

Anatomy

The toggle button is built up by a rack container, containing at least two toggle buttons.

Components
1
Toggle rack container
2
Unchecked container
3
Checked container
4
Unchecked label
5
Checked label
6
Unchecked icon
7
Checked icon

Colors

The menu buttons are only displayed in a normal style.

Element
Color / Style name
1
Rack container
style-indent
2
Unchecked container
style-flat
3
Checked container
style-normal-enabled
4
Text + Checked icon
color-ui-element-active
5
Unchecked icon
color-ui-element-neutral

Typography and icons

The label text describes the button. The arrow icon is a part of the menu button, indicating that it expands a menu, and not should not be changed.

Text category
Text attributes
1
Body
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
Line height: 24px
2
Active body
Aa
Typeface: Open Sans
Weight: Bold
Size: 16px
Line height: 24px
3
Label
Aa
Typeface: Open Sans
Weight: Bold
Size: 12px
Line height: 24px
4
Active label
Aa
Typeface: Open Sans
Weight: Bold
Size: 12px
Line height: 24px

Measures and spacing

Both toggle buttons uses the button-height and the full container radius.

Standard Toggle button
1
Component measures
2
Spacing
3
Border sizes
Icon Toggle button
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Standard Toggle button
Item 1 Unchecked
Item 1 contianer
style-flat-enabled
Item 1 Hover
Item 1 contianer
style-flat-hover
Item 1 Pressed
Item 1 contianer
style-flat-pressed
Item 1 Focused
Item 1 contianer
style-flat-focused
Item 1 Disabled
Rack container
style-indent-disabled
Item 1 container
style-flat-disabled
Item 2 container
style-selected-disabled
Toggle text
color-ui-element-disabled
Item 1 Checked
Item 1 container
style-normal-enabled
Icon toggle button
Item 1 Unchecked
Item 1 contianer
style-flat-enabled
Item 1 Hover
Item 1 contianer
style-flat-hover
Item 1 Pressed
Item 1 contianer
style-flat-pressed
Item 1 Focused
Item 1 contianer
style-flat-focused
Item 1 Disabled
Rack container
style-indent-disabled
Item 1 container
style-flat-disabled
Item 2 container
style-selected-disabled
Toggle text
color-ui-element-disabled
Item 1 Checked
Item 1 container
style-normal-enabled