Buttons

<div class="c-button-group">
  <button class="c-button c-button--default">
    <div class="c-button__label">Default button</div>
  </button>
  <button class="c-button c-button--primary">
    <div class="c-button__label">Primary button</div>
  </button>
  <button class="c-button c-button--danger">
    <div class="c-button__label">Danger button</div>
  </button>
  <button class="c-button c-button--success">
    <div class="c-button__label">Success button</div>
  </button>
  <button class="c-button c-button--subtle">
    <div class="c-button__label">Subtle button</div>
  </button>
  <button class="c-button c-button--link">
    <div class="c-button__label">Link button</div>
  </button>
</div>

<div class="c-button-group">
  <button class="c-button c-button--default">
    <div class="c-button__label">Default dropdown</div>
    <i class="icon icon-caret-down c-button__caret"></i>
  </button>
  <button class="c-button c-button--default">
    <i class="icon icon-calendar c-button__icon"></i>
    <div class="c-button__label">Icon + label button</div>
  </button>
  <button class="c-button c-button--default c-button--icon">
    <i class="icon icon-close c-button__icon"></i>
  </button>
</div>

<div class="c-button-group">
  <div class="c-button-group c-button-group--tabbed">
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-zoom-out"></i>
    </button>
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-zoom-in"></i>
    </button>
  </div>
  <div class="c-button-cross">
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-chevron-top"></i>
    </button>
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-chevron-left"></i>
    </button>
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-reset"></i>
    </button>
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-chevron-right"></i>
    </button>
    <button class="c-button c-button--default c-button--icon">
      <i class="c-button__icon icon icon-chevron-down"></i>
    </button>
  </div>
</div>