Toggle

A real <button aria-pressed>, the WAI-ARIA pattern for a two-state toggle that looks and behaves like a button (a toolbar "bold" button, say). Distinct from Switch, which is the pattern for an on/off setting.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

label

size

pressed

disabled

Usage

<Toggle>Bold</Toggle>

<kernel-toggle>Bold</kernel-toggle>

Props

Props for Toggle.
Prop	Type	Default
`pressed` / `defaultPressed`	boolean	false
`onPressedChange`	(pressed: boolean) => void	—
`size`	"sm" \| "md" \| "lg"	"md"