• Components
  • Buttons

Button bar

Button 1 Button 2 Button 3

Usage notes

Group a set of buttons together on a single line to form a button bar.

  
<div class="button-bar">
  <div class="button-group">
    <a class="btn btn--primary" href="#">Button 1</a>
    <a class="btn btn--primary" href="#">Button 2</a>
    <a class="btn btn--primary" href="#">Button 3</a>
  </div>
  <div class="button-group">
    <button type="button" class="btn btn--secondary btn--small btn--secondary--active">Button 4</button>
    <button type="button" class="btn btn--secondary btn--small">Button 5</button>
    <button type="button" class="btn btn--secondary btn--small">Button 6</button>
  </div>
</div>

Developer Notes

Any button styles can be applied to the button var.

Presentation is completely separated from markup semantics, so that the 'buttons' can be implemented as links or button inputs.