Saturday
ComponentsToggle

Toggle

A switch that turns a setting on or off immediately, with playground controls for state and disabled.

Toggle

Switches a setting on or off with a single tap. Use when the change takes effect right away.

Layout
On
Code preview
import { Toggle } from "./Toggle";

Toggle specs

Color tokens for the switch track, thumb, and label.

TokenValueColorUsage
Track off
var(--input-input-stroke-default)#8f9da4Background when the setting is off
Track on
var(--lavender-500)#765cd8Background when the setting is on
Thumb
#ffffff#ffffffKnob that slides left or right
Label
var(--text-heading-strong)#063235Text beside the switch