Toggle
A two-state button (pressed / not pressed). Built on Radix Toggle. Use for stateful chrome like text-formatting buttons or a pinned/unpinned state.
Default
<Toggle aria-label="Toggle italic">
<Italic />
</Toggle>Outline
<Toggle variant="outline" aria-label="Toggle bold">
<Bold />
</Toggle>With text
<Toggle aria-label="Toggle italic">
<Italic /> Italic
</Toggle>Sizes
<>
<Toggle size="sm" aria-label="Bold"><Bold /></Toggle>
<Toggle size="md" aria-label="Bold"><Bold /></Toggle>
<Toggle size="lg" aria-label="Bold"><Bold /></Toggle>
</>Default pressed
<Toggle defaultPressed aria-label="Toggle bold">
<Bold />
</Toggle>Disabled
<>
<Toggle disabled aria-label="Bold"><Bold /></Toggle>
<Toggle variant="outline" disabled defaultPressed aria-label="Italic"><Italic /></Toggle>
</>Props
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "outline" | "default" |
| size | "sm" | "md" | "lg" | "md" |
| pressed | boolean | — |
| defaultPressed | boolean | false |
| onPressedChange | (pressed: boolean) => void | — |
| disabled | boolean | false |
| …rest | Radix Toggle.Root props | — |
Source
packages/react/src/components/toggle.tsx · Figma node 2819:31491