forms contract
ToggleButton
Button that maintains a pressed state — visual "this option is currently active". Use for view modes, filters, and segmented controls.
Variants
- default
- segmented
Sizes
- sm
- md
- lg
Slots
- children
Example
<ToggleButton aria-pressed={view === 'grid'} onClick={() => setView('grid')}>Grid</ToggleButton>Usage rule
`aria-pressed` must mirror the visual state — true when filled, false when ghost.
The full ToggleButton contract has 3 more rules, plus the do-not patterns. Get the full recipe.