Components
Toggle
A two-state button that can be either on or off, built on Radix UI.
Install
npx shadcn@latest add https://atomx.acau.net/r/toggle.jsonUsage
Use Toggle for binary state — bold/not-bold, mute/unmute, follow/unfollow. Drive the state with pressed (controlled) or defaultPressed (uncontrolled). Always supply an aria-label when the trigger contains only an icon.
<Toggle aria-label="Bold">
<Bold />
</Toggle>Preview
Variants and states
Props
Toggle extends React.ComponentProps<typeof TogglePrimitive.Root> and VariantProps<typeof toggleVariants>.
| Prop | Type | Notes |
|---|---|---|
pressed | boolean | Controlled pressed state. |
defaultPressed | boolean | Initial state when uncontrolled. |
onPressedChange | (pressed: boolean) => void | Fired when pressed state changes. |
variant | "default" | "outline" | Visual style. Defaults to "default". |
size | "default" | "sm" | "lg" | Size token. Defaults to "default". |
disabled | boolean | Disables the toggle. |
The toggleVariants cva definition is exported for reuse — Toggle Group consumes it to keep the two components visually consistent.