Toggle
A two-state button that can be pressed or unpressed, commonly used for formatting controls.
Installation
pnpm dlx stera-ui@latest add toggle
Variants
| Variant | Description |
|---|---|
default | No border, background appears on hover/press |
outline | Bordered with a surface background |
With Text
Sizes
| Size | Description |
|---|---|
xs | Extra small |
sm | Small |
md | Medium (default) |
lg | Large |
icon | Square icon button |
icon-xs | Extra small icon button |
icon-sm | Small icon button |
icon-lg | Large icon button |
Disabled
API Reference
Built on Base UI's Toggle primitive — see the full API reference there.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "default" |
size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "md" |
pressed | boolean | — |
defaultPressed | boolean | — |
onPressedChange | (pressed: boolean) => void | — |
disabled | boolean | false |