Layout
On
Code preview
import { Toggle } from "./Toggle";
A switch that turns a setting on or off immediately, with playground controls for state and disabled.
Switches a setting on or off with a single tap. Use when the change takes effect right away.
import { Toggle } from "./Toggle";
Color tokens for the switch track, thumb, and label.
| Token | Value | Color | Usage |
|---|---|---|---|
| Track off | var(--input-input-stroke-default) | #8f9da4 | Background when the setting is off |
| Track on | var(--lavender-500) | #765cd8 | Background when the setting is on |
| Thumb | #ffffff | #ffffff | Knob that slides left or right |
| Label | var(--text-heading-strong) | #063235 | Text beside the switch |