Toggle
betaA two-state button that squishes when pressed, springs back on release, and pours its fill out from the centre when it turns on.
- Forms
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add togglenpm packages installed: class-variance-authority, radix-ui.
import { Toggle } from "@/components/ui/toggle";Default
Variants
Sizes
Controlled
<Toggle>
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
variant | "default" | "outline" | "default" |
Every prop of Radix UI’s Toggle.Root, plus className.
A native button exposed with aria-pressed, operable with Space and Enter. An icon-only toggle needs an aria-label, and the label should name the thing being switched ("Bold"), not the state, since aria-pressed already reports on or off. The fill layer is aria-hidden and the state is never carried by colour alone — the pressed state is announced. Nothing animates on first paint, and under reduced motion the squish, fill and icon pop all resolve instantly.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes