Button group

Connected buttons that read as one control.

Source: src/stylus/components/button-group.styl

Horizontal

Borders are de-duplicated between children; .active marks the current choice.

<div class="button-group">
  <button type="button" class="button secondary sm active">Weekly</button>
  <button type="button" class="button secondary sm">Monthly</button>
  <button type="button" class="button secondary sm">Annual</button>
</div>

Vertical

Add .button-group-vertical.

<div class="button-group button-group-vertical">
  <button type="button" class="button secondary sm">Duplicate</button>
  <button type="button" class="button secondary sm">Archive</button>
</div>