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