Toggle Button Group Component

Used to properly layout a group of toggle buttons.

The toggle button group is a collection of JavaScript-based buttons; allowing single or multi-selection. The toggle button group gives a more visual emphasis on the choices available compared to form based radios and checkboxes.

Terminology

We use the following terminology when discussing this pattern.

  • Toggle Button Group : the name of the pattern as a whole. For example, the classname would be .toggle-button-group
  • Toggle Button : a single button in the group. It can be pressed or unpressed.
  • Pressed/Unpressed : correlates to the aria-pressed attribute
Toggle Button ComponentTokens Component