Toggle
A standalone pressed button primitive with controlled and uncontrolled state.
Features
- Standalone pressed button
- Controlled or uncontrolled state
aria-pressedreflectiondata-statestate- Headless primitives
Installation
npm install @ariaui/toggle
Examples
These playgrounds mirror individual shadcn Figma toggle states with @ariaui/toggle. Use it for one independent pressed button with controlled or uncontrolled state.
Icon rows use lucide-react; shared class strings live in toggleExampleTokens.ts.
Default
Standalone icon-only toggle.
No preview output yet.
Outline
Visible border on the item for an outlined treatment.
No preview output yet.
With text
Icon plus visible label in a wider control.
No preview output yet.
Small
No preview output yet.
Large
No preview output yet.
Disabled
Disabled standalone toggle with muted styling.
No preview output yet.
Anatomy
import * as Toggle from "@ariaui/toggle";
export default function Example() {
return <Toggle.Root />;
}
API Reference
Root
Standalone pressed button. Renders a native `<button type="button">` and forwards button props.
| Prop | Type | Default |
|---|---|---|
pressed | boolean | — |
defaultPressed | boolean | false |
onPressedChange | (pressed: boolean) => void | — |
disabled | boolean | false |
| Attribute | Values |
|---|---|
| aria-pressed | `true` when pressed, `false` when not pressed |
| data-state | `on` when pressed, `off` when not pressed |
| data-disabled | present when disabled |
Keyboard
| Shortcut | Action |
|---|---|
| Space/Enter | Toggle a standalone Toggle.Root button. |
Accessibility
Toggle.Root renders a native button with aria-pressed, so screen readers can announce the on/off state. Use an accessible label for icon-only toggles.
Standalone toggle visual state is exposed via data-state. Use ToggleGroup when related toggles need shared single or multiple selection state.