Button Group

A button group is a type of form input that presents selectable options as buttons. Use as an alternative to radio or select components with no more than four options. Each option shares the same container and text label structure as a standard button.

Button group classes are designed to be used with a <div>wrapped <button> element, but can also modify intro wrapped<a> or <input> elements.

Variants

Button Group

Every button group displays both active and inactive options, indicated primarily by the color of the container. All options are inactive to start, and the user can only select one active option at a time. Active and inactive options each have three states: default, hover, and focus.

<div class="c-button-group" role="group" aria-label="Button Group Example">
  <button type="button" class="c-button-group__button--active">
    Button 1
  </button>
  <button type="button" class="c-button-group__button">
    Button 2
  </button>
  <button type="button" class="c-button-group__button">
    Button 3
  </button>
</div>

Copy