Toggle
A two-state button that can be toggled on or off. Built on Radix UI Toggle.
Variants
Sizes
With Text
Disabled
Usage
Use toggles for binary settings that take effect immediately, like formatting options or feature flags.
For on/off settings with a clear label, consider using a Switch instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "default" | Visual style of the toggle |
| size | "default" | "sm" | "lg" | "default" | Size of the toggle |
| pressed | boolean | — | Controlled pressed state |
| onPressedChange | (pressed: boolean) => void | — | Callback when toggle state changes |
| disabled | boolean | false | Disables the toggle |