Toggle
A pressed/unpressed button, wrapping the Base UI Toggle. Good for on/off actions that live outside a form: mute, favorite, show details. Several of them become a Toggle group.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
Three flavors, one component: text, text with an icon, and icon only. Icons are just children; iconOnly squares the toggle off and expects an aria-label.
States
Pressed, unpressed, and disabled. Pressed uses the same muted surface as a secondary button, one step deeper on hover.
Styling states
The pressed state comes through data-pressed (and aria-pressed for screen readers), so custom styling never needs JavaScript:
.ub-toggle[data-pressed] {
background: var(--ub-accent);
color: var(--ub-accent-contrast);
}Props
Everything the Base UI Toggle accepts passes through. The essentials:
| Prop | Type | Default | Description |
|---|---|---|---|
defaultPressed | boolean | false | Initial state when uncontrolled. |
pressed | boolean | – | Controlled state. Pair with onPressedChange. |
value | string | – | Identity within a ToggleGroup. |
size | "default" | "compact" | "default" | Default is 36px tall with 16px text; compact is 28px with 14px text. |
iconOnly | boolean | false | Square toggle holding only an icon; pair with aria-label. |
disabled | boolean | false | Blocks interaction and dims the toggle. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Toggle, from @usebones/react.
- defaultPressed or pressed + onPressedChange; size "default" | "compact"; iconOnly requires aria-label; icons are children via @usebones/icons.
- Keep the label constant across states (Mute, not Mute/Unmute); aria-pressed already announces the change.
- Inside a ToggleGroup, identify each toggle with value="..." (see the Toggle group page).
- Restyle in CSS via [data-pressed], [data-disabled], [data-size], [data-icon-only]. Tokens only.