Button Group

Button groups are used to bunch together buttons with similar actions.

Usage

<div class="c-button-group">
  <button class="c-button-group__item c-button c-button--sm c-button--white" href="/">
    Action 01
  </button>
  <button class="c-button-group__item c-button c-button--sm c-button--white" href="/">
    Action 02
  </button>
  <button class="c-button-group__item c-button c-button--sm c-button--white" href="/">
    Action 03
  </button>
</div>

Implementation

Type	Name
Elements
Wrapper	`.c-button-group`
Item	`.c-button-group__item`
Modifiers	None
States	None

Examples

Segmented Control

A segmented control allows users to choose one out of a range of available options. It is a button group of equal options where only one can be selected and active. There must always be one option active.

<div class="c-button-group">
  <button class="c-button-group__item c-button c-button--sm c-button--white" href="/">Active</button>
  <button class="c-button-group__item c-button c-button--sm c-button--white c-button--white-inactive" href="/">Inactive</button>
  <button class="c-button-group__item c-button c-button--sm c-button--white c-button--white-inactive" href="/">Inactive</button>
</div>