# ToggleButton

Source: https://design.ritchiebros.com/components/inputs/toggle-button/

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.

## Related components

- [ButtonGroup](https://design.ritchiebros.com/components/inputs/button-group/)
- [Switch](https://design.ritchiebros.com/components/inputs/switch/)
- [Button](https://design.ritchiebros.com/components/inputs/button/)