Button Groups

Basic

Wrap a series of buttons with .c-btn in .c-btn-group.

Left

Middle

Right

Left

Middle

Right

p
  .c-btn-group
    .c-btn
      | Left
    .c-btn
      | Middle
    .c-btn
      | Right

p
  .c-btn-group
    .c-btn--primary
      | Left
    .c-btn--primary
      | Middle
    .c-btn--primary
      | Right

p
  .c-btn-group
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-left-text
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-less-text
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-right-text

<p>
  <div class="c-btn-group">
    <div class="c-btn">
      Left
    </div>
    <div class="c-btn">
      Middle
    </div>
    <div class="c-btn">
      Right
    </div>
  </div>
</p>
<p>
  <div class="c-btn-group">
    <div class="c-btn--primary">
      Left
    </div>
    <div class="c-btn--primary">
      Middle
    </div>
    <div class="c-btn--primary">
      Right
    </div>
  </div>
</p>
<p>
  <div class="c-btn-group">
    <div class="c-btn--secondary -shape-square">
      <i class="kzicon kzicon-left-text"></i>
    </div>
    <div class="c-btn--secondary -shape-square">
      <i class="kzicon kzicon-less-text"></i>
    </div>
    <div class="c-btn--secondary -shape-square">
      <i class="kzicon kzicon-right-text"></i>
    </div>
  </div>
</p>