2.4 #Components.button-group Button Group

Toggle example guides Toggle HTML markup

Group a series of buttons together on a single line. If you would like to apply validation styles and messages, check out the Form Control component.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Markup
<div class="sb-btn-group" role="radiogroup">
  <button class="sb-btn" role="radio" aria-checked="false">Button one</button>
  <button class="sb-btn" role="radio" aria-checked="false">Button two</button>
  <button class="sb-btn sb-btn--active" role="radio" aria-checked="true">Active</button>
  <button class="sb-btn" disabled role="radio" aria-checked="false">Disabled</button>
  <button class="sb-btn sb-btn--active" role="radio" aria-checked="true" disabled>Disabled - active</button>
</div>
Source: components/_button-group.scss, line 1