Toggle
shadcn/ui
2 variants
Single on/off button that remembers its pressed state. Like a stateful icon button.
@/components/ui/toggleVariants
| Variant | Off | On (pressed) | Pressed token |
|---|---|---|---|
| default | data-[state=on]: bg-accent text-accent-foreground | ||
| outline | adds border-border; same pressed bg-accent |
States
| State | Preview | Token |
|---|---|---|
| Off (default) | bg-transparent — no background | |
| On (pressed) | bg-accent text-accent-foreground | |
| Hover | hover:bg-muted hover:text-muted-foreground | |
| Disabled off | opacity-50 pointer-events-none | |
| Disabled on | opacity-50 pointer-events-none |
Sizes
lg · 40px
default · 36px
sm · 32px
With text
In context — formatting toolbar
Italic is pressed (defaultPressed). Toggle size="sm" matches the toolbar density.
Toggle vs Switch
| Toggle | Switch | |
|---|---|---|
| Shape | Button (rectangular) | Pill / slider thumb |
| Context | Toolbars, editing actions, view modes | Settings, feature flags, notifications |
| Label | Icon or icon+text (brief) | Full sentence description |
Props
| Prop | Type | Description |
|---|---|---|
| variant | "default" | "outline" | Visual style of the toggle |
| size | "sm" | "default" | "lg" | Height and padding |
| pressed | boolean | Controlled pressed state |
| defaultPressed | boolean | Initial pressed state (uncontrolled) |
| onPressedChange | function | (pressed: boolean) => void |
| disabled | boolean | Prevents interaction, reduces opacity |
| aria-label | string | Required for icon-only toggles — describes the action |
On this page