CNVS

Button Groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Table of Contents 
<div class="button-group" role="group">
  <button type="button" class="button button-default">
    Left
  </button>
  <button type="button" class="button button-default">
    Middle
  </button>
  <button type="button" class="button button-default">
    Right
  </button>
</div>

Styled Button Groups

Button groups work with all supported button styles. Add .button-*-outline or any other included button style class to your button element. You can even combine styles.

Outlined Button Groups

<div class="button-group" role="group">
  <button type="button" class="button button-outline active">
    Left
  </button>
  <button type="button" class="button button-outline">
    Middle
  </button>
  <button type="button" class="button button-outline">
    Right
  </button>
</div>

Rounded Button Groups

<div class="button-group" role="group">
<button type="button" class="button button-rounded active">
Left
</button>
<button type="button" class="button button-rounded">
Middle
</button>
<button type="button" class="button button-rounded">
Right
</button>
</div>

Combined Style Button Groups

<div class="button-group" role="group">
<button type="button" class="button button-outline button-rounded active">
Left
</button>
<button type="button" class="button button-outline button-rounded">
Middle
</button>
<button type="button" class="button button-outline button-rounded">
Right
</button>
</div>

Inverse Styling

<div class="button-group" role="group">
  <button type="button" class="button button-outline button-inverse">
    Left
  </button>
  <button type="button" class="button button-outline button-inverse">
    Middle
  </button>
  <button type="button" class="button button-outline button-inverse">
    Right
  </button>
</div>