Toggle
Provides a two-state button that users can press to turn a specific feature, view, or styling option on and off.
2 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-toggleUsage
Code
import { Toggle } from '@/components/ui/toggle'Code
<Toggle>Toggle</Toggle>Features
Variants
Toggle buttons in default and outline styles.
Sizes
Toggle buttons in sm, default, and lg sizes.
Disabled
Toggle button rendered in a disabled state.
API Reference
Toggle
Styled wrapper for Toggle.Root from Base UI with variant and size options.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|outline | default | Controls the toggle styling |
size | default|sm|lg | default | Controls the toggle size |
Examples
Large toggle
Toggle icon group
Bookmark toggle with tooltip and success toast