Toggle
Binary on/off switch for immediately-applied settings.
Variants
Toggle is a binary on/off switch. Use for settings that take effect immediately — no save required.
| Variant | Purpose |
|---|---|
| Off | Setting is disabled. Neutral grey track, thumb on the left. |
| On | Setting is enabled. Brand-filled track, thumb on the right. |
Design tokens
| Token | Value | Description |
|---|---|---|
toggle/track/off | #aeaeae | Off track colour |
toggle/track/off/hover | #a3a3a3 | Off track hover |
toggle/track/on | #318272 | On track colour |
toggle/track/on/hover | #226558 | On track hover |
toggle/track/on/pressed | #15483e | On track pressed |
toggle/thumb | #ffffff | Thumb colour |
size | 40×24 | Track dimensions (single size) |
thumb-size | 20px | Thumb diameter |