A toggle button represents an on/off state that can be grouped so people select one or several related options — like formatting controls or view modes.
Figma
The Figma reference for ToggleButton will appear here once the design link is added.
Storybook
Interactive examples for ToggleButton will render here once the Storybook link is wired in.
Best practices
- Use toggle buttons for a small set of related, mutually reinforcing options.
- Make the selected state visually distinct from the unselected state.
- When only one option may be active, enforce exclusive selection in the group.
- Give icon-only toggle buttons an accessible label.
Do’s and don’ts
Do
Group closely related choices, such as text alignment: left, center, right.
Don’t
Use toggle buttons for primary page actions — use a button instead.
Accessibility
- Each toggle exposes its pressed state (aria-pressed) so assistive technology announces whether it’s active.
- Icon-only toggles need an accessible name describing the option.