A two-state button that can be either on or off.
| Name | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "lg" | "icon" | default | Size variant |
| pressed | boolean | — | Controlled pressed state |
| defaultPressed | boolean | — | Default pressed state |
| disabled | boolean | — | Disable toggle |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.card | var(--card) | White background for interactive element | |
| Border | color.input | var(--input) | Border color | |
| Background (Pressed) | color.accent | var(--accent) | Pressed state background | |
| Text (Pressed) | color.accent-foreground | var(--accent-foreground) | Pressed state text | |
| Hover Overlay | color.overlay-hover | var(--overlay-hover) | Hover state overlay | |
| Active Overlay | color.overlay-active | var(--overlay-active) | Active/pressed state overlay | |
| Focus Ring | color.ring | var(--ring) | Focus indicator | |
| Border Radius | borderRadius.md | var(--radius) | Medium corner rounding | |
| Height (sm) | spacing.9 | 2.25rem | Small toggle height | |
| Height (default) | spacing.10 | 2.5rem | Default toggle height | |
| Height (lg) | spacing.11 | 2.75rem | Large toggle height | |
| Font Size (sm) | fontSize.xs | 0.75rem | Extra small text for sm size | |
| Font Size (default) | fontSize.sm | 0.875rem | Small text for default size | |
| Font Size (lg) | fontSize.base | 1rem | Base text for lg size |
A simple toggle button that can be pressed or unpressed.
<Toggle>Toggle me</Toggle>
Manage toggle state externally with pressed and onPressedChange.
Current state: not pressed
const [pressed, setPressed] = useState(false);
<Toggle pressed={pressed} onPressedChange={setPressed}>
Controlled
</Toggle>Available size variants for different contexts.
<Toggle size="sm">Small</Toggle> <Toggle>Default</Toggle> <Toggle size="lg">Large</Toggle>
Square toggle buttons ideal for icon-only content.
<Toggle size="icon" aria-label="Toggle bold"> <BoldIcon className="h-4 w-4" /> </Toggle>
Disabled toggles for read-only or unavailable states.
<Toggle disabled>Disabled</Toggle> <Toggle disabled defaultPressed>Disabled (pressed)</Toggle>