Components
Toggle
A two-state button that can be turned on or off — ideal for icon controls in toolbars and inline formatting actions.
Basic usage
Wrap a Lucide icon and provide an aria-label. Click to flip between on and off.
Variants
Use default for toolbar groups and outline for standalone controls that need a visible boundary.
Sizes
Three sizes — sm, default, and lg — to match the density of the surrounding UI.
States
Start a toggle in the on position with defaultPressed, or block interaction with disabled. Toggles can pair an icon with a text label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outline' | 'default' | Visual style — transparent by default, or bordered for standalone controls. |
size | 'sm' | 'default' | 'lg' | 'default' | Controls height and horizontal padding of the toggle. |
pressed | boolean | — | Controlled on/off state. Pair with onPressedChange. |
defaultPressed | boolean | false | Initial pressed state when uncontrolled. |
onPressedChange | (pressed: boolean) => void | — | Fires when the pressed state changes. |
disabled | boolean | false | Disables interaction and reduces opacity to 50%. |
className | string | — | Additional Tailwind classes to merge. |
...rest | Radix Toggle.Root props | — | All Radix Toggle root props are forwarded. |
Accessibility
- Built on Radix
Toggle, which exposes the on/off state to assistive tech viaaria-pressed. - Always pass an
aria-labelfor icon-only toggles so the control has an accessible name. - Fully keyboard operable — focus with Tab and flip with Enter or Space.
- A
focus-visiblering using the brand gold ring token appears on keyboard navigation and stays hidden on click. - The disabled state removes pointer events and is conveyed to the accessibility tree.