Slide button

Slider buttons are used for important functions where it is important to prevent accidental clicks.

Variations

Slide button

The continuous slider is used to pick a value within a limited range.

Specs

How the component are built up and styled in both enabled and running state.

Anatomy

The slider button are built up by a track that shows the room to slide the track, and a thumb that you can drag to do the action.

Components
1
Empty track
2
Thumb
3
Label

Colors

The track switches style when it is on.

Element
Color name
1
Thumb
style-normal
2
Track
style-indent
3
Icon
color-ui-element-neutral
4
Label
color-ui-element-active
5
Active track
style-alert-running

Typography and icons

The text changes weight when it is in an on state.

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
2
Icon
Icon name: arrow-right
Icon container: 24px X 24px
2
Icon
Icon name: arrow-left
Icon container: 24px X 24px

Measures and spacing

The measurements are the same in both enabled and on states, but in the on state it is flipped horizontally.

1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Enabled
Thumb
style-normal-enabled
Hover
Thumb
style-normal-hover
Pressed
Thumb
style-normal-pressed
Track
style-indent-pressed
Focused
Thumb
style-normal-focused
Disabled
Thumb
style-thumb-disabled
Track
style-selected-disabled
Icons
color-ui-element-disabled
Checked
Thumb
style-normal-enabled
Track
style-alert-running