Components
Toggle
A two-state button that can be either on or off.
Loading
Installation
pnpm dlx shadcn@latest add @toui/toggle
Examples
Text
Loading
Outline
Loading
Size
Loading
Pattern
Tokens
19 CSS variables in 7 categories.
height
| CSS Variable | Value | Description |
|---|---|---|
--toggle-height-sm | 1.75rem | 28px |
--toggle-height-md | 2.125rem | 34px |
--toggle-height-lg | 2.5rem | 40px |
min-width
| CSS Variable | Value | Description |
|---|---|---|
--toggle-min-width-sm | 1.75rem | — |
--toggle-min-width-md | 2.125rem | — |
--toggle-min-width-lg | 2.5rem | — |
px
| CSS Variable | Value | Description |
|---|---|---|
--toggle-px-sm | 0.3125rem | 5px |
--toggle-px-md | 0.5rem | 8px |
--toggle-px-lg | 0.625rem | 10px |
gap
| CSS Variable | Value | Description |
|---|---|---|
--toggle-gap-sm | var(--component-gap-xs) | — |
--toggle-gap-md | var(--component-gap-xs) | — |
--toggle-gap-lg | var(--component-gap-sm) | — |
text
| CSS Variable | Value | Description |
|---|---|---|
--toggle-text-sm | var(--component-text-xs) | — |
--toggle-text-md | 0.8125rem | 13px |
--toggle-text-lg | var(--component-text-sm) | — |
icon-size
| CSS Variable | Value | Description |
|---|---|---|
--toggle-icon-size-sm | 0.875rem | 14px |
--toggle-icon-size-md | 1rem | 16px |
--toggle-icon-size-lg | 1rem | 16px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--toggle-radius | var(--component-radius-sm) | — |
Credits
- Built with Radix UI Toggle.