Search for a command to run...
A standalone two-state button — pressed/unpressed. Same chrome as a `ToggleGroupItem` (bordered chip, brand-tinted border + faint fill when active). Use for single toolbar toggles like bold, italic, or show-timestamps. For grouped state, reach for `ToggleGroup`.
Forwards every Radix Toggle.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | Controlled pressed state. Pair with onPressedChange. |
defaultPressed | boolean | false | Uncontrolled initial state. |
onPressedChange | (pressed: boolean) => void | — | Fires on toggle. |
disabled | boolean | false | Standard HTML disabled. |
Reach for Toggle for single binary toggles that aren't part of a group — a "Show
timestamps" button in a toolbar, an editor's "Bold" outside any cluster.
Use aria-label when the label is an icon. The pressed state is conveyed via aria-pressed
automatically; the label says what the toggle controls.
Use Toggle for app-level on/off settings (notifications, dark mode). Switch reads as
"instant" — the slider metaphor matches the affordance better.
Use multiple loose Toggles when they share state. ToggleGroup (single or multiple) is the
right primitive — it manages keyboard nav and value coordination.