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.

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 by the background 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