Toggle
A two-state button that stays pressed. Use it for a setting that takes effect immediately, not as a substitute for a checkbox in a form.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | — |
pressed | boolean | undefined | — | The controlled state of the toggle. |
defaultPressed | boolean | undefined | false | The state of the toggle when initially rendered. Use `defaultPressed` if you do not need to control the state of the toggle. |
onPressedChange | ((pressed: boolean) => void) | undefined | — | The callback that fires when the state of the toggle changes. |
variant | "default" | "outline" | null | undefined | — | — |
size | "default" | "sm" | "lg" | null | undefined | — | — |
Button
Trigger an action or navigation. Seven variants cover the hierarchy from the one primary action per view down to inline links and the hero-only gradient CTA.
Input
A single-line text field for short, free-form responses — names, amounts, references. For longer text use Textarea; for a fixed set of choices use Select or Combobox.