Anatomy
|
Item |
Name |
Description |
component |
|---|---|---|---|
|
1 |
Knob |
Selection control (div) that can be checked or unchecked, and pushed into different states. |
- |
|
2 |
Container |
Background container where the knob is moved. |
- |
Color
Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value.
|
Element |
Property |
Token |
|---|---|---|
|
Switch unchecked |
Fill |
background.ineractive.default |
|
|
Knob fill style |
background.static.flat |
|
Switch checked |
Fill |
background.interactive.primary.default |
|
|
Knob fill style |
background.static.flat |
Specification and properties
Spacing
|
Element |
Property |
px |
|
Switch |
Width |
44 |
|
|
Height |
24 |
Placement
Switches can be placed either in context, near the content it is control, or in a vertical group. Vertical groups are typically placed in a separate settings or account section.
States
The switch states are composed out of two strings:
- Unchecked and checked
- Default, hover, active and disabled
|
Item |
State |
|
Description |
|---|---|---|---|
|
1 |
Default |
A Unchecked B Checked |
The default style before the user interacts with the switch. |
|
2 |
Hover |
A Unchecked B Checked |
The switch changes style to let the user know it’s interactive. |
|
3 |
Active |
A Unchecked B Checked |
The switch container changes style to let the user know the switch is checked. |
|
4 |
Disabled |
A Unchecked B Checked |
Communicates that a switch exists, but isn't available in that scenario. When the user hovers over a switch in a checked disabled state, the cursor shows as 'not allowed'. |