Toggle
A button that switches between pressed and unpressed states. Exposes aria-pressed for screen readers.
Basic
Click to toggle. aria-pressed reflects the current state automatically.
States
Visual reference — unpressed vs pressed. These are two independent toggle instances, not a radio group.
aria-pressed="false"
aria-pressed="true"
Text formatting
Icon-only toggles — use aria-label to describe each action.
None selected
Exclusive selection
Use two toggles to implement a mutually-exclusive view switcher.
Variants
Sizes
Controlled
Manage pressed state from outside via pressed and onPressedChange.
aria-pressed:
false