Toggle: With text
Icons and labels sit side by side. Toggles with visible text don't need an aria-label.
This adds the example as components/examples/toggle/text.tsx, together with the Toggle component and the HextaUI theme tokens it needs.
pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-text.jsonTo add only the component, follow the Toggle installation.
Props in this example
The Toggle props this example sets, from the API reference.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "default" |
defaultPressed | boolean | false |
Every prop is in the Toggle API reference.
See them all, with keyboard support and accessibility notes, on the Toggle page.
- ButtonButtons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.
- Button groupButtons joined into one control, with shared seams, separators, text addons, nesting and vertical stacks.
- Toggle groupA row of toggles for one choice or many, with a fill that slides to the picked item, joined or spaced items and arrow-key focus.