- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Toggle
Toggle button component with default and outline variants, default/sm/lg sizes, and pressed, hover, focus, and disabled state coverage.
Figma: DS-shadcn-001 Foundations · 21133:11461
Import
Live Demo
Toggle button variants with pressed, focus, hover, disabled, and size coverage.
Interactive demo (Figma 21133:11461)
Pressed: Off
Variants x states x sizes
| Variant / state | default | sm | lg |
|---|---|---|---|
| default / default | |||
| default / hover | |||
| default / focus | |||
| default / pressed | |||
| default / disabled | |||
| outline / default | |||
| outline / hover | |||
| outline / focus | |||
| outline / pressed | |||
| outline / disabled |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "default" | The visual style variant of the toggle |
| size | "default" | "sm" | "lg" | "default" | The size of the toggle |
| pressed | boolean | — | Controlled pressed state |
| defaultPressed | boolean | — | Initial pressed state for uncontrolled usage |
| disabled | boolean | false | When true, prevents interaction with the toggle |