Slide button
Slider buttons are used for important functions where it is important to prevent accidental clicks.
Variations
The textbox can be used in a standard version and with steppers.
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-enabled
2
Track
style-indent-enabled
3
Icon
color-on-backgorund-neutral
4
Label
color-on-backgorund-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-on-background-disabled
Pressed
Thumb
style-normal-enabled
Track
style-alert-running