Toggle
A two-state button that stays pressed when toggled on. Used for formatting toolbars (bold/italic) or option toggles.
Variants
Sizes
With text
Disabled
Installation
pnpm
pnpm dlx @hex-core/cli add toggleAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | — | Controlled pressed state |
defaultPressed | boolean | false | Default pressed state for uncontrolled usage |
onPressedChange | function | — | Callback on pressed change: (pressed: boolean) => void |
variant | "default" | "outline" | default | Visual style |
size | "default" | "sm" | "lg" | default | Toggle size |
disabled | boolean | false | Disable the toggle |
AI Guidance
When to use
Use for binary on/off actions that persist: toolbar formatting buttons (bold, italic), layout mode switches, filter toggles. Not submitted as form data.
When not to use
Don't use for instant settings (use Switch). Don't use for form boolean fields (use Checkbox). Don't use for choosing one of many (use ToggleGroup).
Common mistakes
- Using for form field submission (use Checkbox instead)
- Forgetting aria-label on icon-only toggles
- Using Toggle when ToggleGroup's single-select mode is needed
Accessibility
Radix sets aria-pressed correctly. Icon-only toggles MUST have aria-label. Space/Enter toggles state.
Related components
Token budget: 400