| State |
Visual change |
Tokens |
| Off |
Strong track, thumb at the start |
color-border-strong, color-surface-raised |
| On |
Primary track, thumb at the end |
color-action-primary-default |
| Saving |
A 12 px turning ring in the thumb |
color-action-primary-default, period-spinner |
| Focus |
2 px outer focus ring with a 2 px gap |
color-focus-ring, border-width-focus |
| Disabled |
Faded track, thumb and label |
color-surface-disabled, color-border-disabled, color-text-disabled |
| Property |
Value |
Token |
Track, md (default) |
32 × 18 px |
switch-width-md, switch-height-md |
Track, sm |
24 × 14 px |
switch-width-sm, switch-height-sm |
| Thumb |
16 px (sm 12 px), with a small shadow |
switch-thumb-md, switch-thumb-sm, shadow-raised |
| Hit area |
Track plus 12 px on each side and 8 px above and below |
space-lg, space-md |
| Track padding |
1 px |
(switch-height − switch-thumb) / 2 |
| Thumb travel |
14 px (sm 10 px) |
switch-width − switch-height |
| Gap between track and label |
8 px |
space-md |
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-switch-width-md | | 32px32px32px | 32px32px32px |
--bigbang-switch-height-md | | 18px18px18px | 18px18px18px |
--bigbang-switch-thumb-md | | 16px16px16px | 16px16px16px |
--bigbang-switch-width-sm | | 24px24px24px | 24px24px24px |
--bigbang-switch-height-sm | | 14px14px14px | 14px14px14px |
--bigbang-switch-thumb-sm | | 12px12px12px | 12px12px12px |
--bigbang-color-border-strong | | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Turning on and off |
Thumb translate (motion.switchThumb) |
motion-switch-duration (230 ms) |
easing-spring-productive-fast |
The duration becomes 1 ms; the thumb jumps into place. |
| Track colour |
background-color (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; a colour transition. |
| Saving |
The ring turns (animate-spin) |
period-spinner (1000 ms) |
Linear |
The turn stops; the state is announced in text. |
See Motion for the values.