Buttons

<div class="c-field-group">
  <button class="c-button">
    <span class="c-button__label">Default</span>
  </button>
  <button
    type="primary"
    class="c-button c-button--primary"
  >
    <span class="c-button__label">Primary</span>
  </button>
  <button
    type="success"
    class="c-button c-button--success"
  >
    <span class="c-button__label">Success</span>
  </button>
  <button
    type="danger"
    class="c-button c-button--danger"
  >
    <span class="c-button__label">Danger</span>
  </button>
  <button
    type="warning"
    class="c-button c-button--warning"
  >
    <span class="c-button__label">Warning</span>
  </button>
  <button
    type="dark"
    class="c-button c-button--dark"
  >
    <span class="c-button__label">Dark</span>
  </button>
  <button
    type="transparent"
    class="c-button c-button--transparent"
  >
    <span class="c-button__label">Transparent</span>
  </button>
  <button class="c-button c-button--inverted">
    <span class="c-button__label">Inverted</span>
  </button>
  <button
    type="link"
    class="c-button c-button--link"
  >
    <span class="c-button__label">Link</span>
  </button>
</div>

<a
  href="#"
  class="c-button"
>
  <span class="c-button__icon c-icon c-icon--small">
    <!-- SVG element -->
  </span>
  <span class="c-button__label">Link button</span>
</a>

<button class="c-button">
  <span class="c-button__label">Dropdown button</span>
  <span
    class="c-button__chevron c-icon c-icon--extra-small"
  >
    <!-- SVG element -->
  </span>
</button>

<div class="c-field-group">
  <button class="c-button c-button--small">
    <span class="c-button__label">Small</span>
  </button>
  <button class="c-button">
    <span class="c-button__label">Default</span>
  </button>
  <button class="c-button c-button--large">
    <span class="c-button__label">Large</span>
  </button>
</div>

<div class="c-button-group">
  <!-- Default -->
  <button class="c-button">
    <span class="c-button__icon c-icon c-icon--small">
      <!-- SVG element -->
    </span>
    <span class="c-button__label">Default</span>
  </button>
  <!-- Icon only -->
  <button class="c-button c-button--icon-only">
    <span class="c-button__icon c-icon c-icon--small">
      <!-- SVG element -->
    </span>
  </button>
  <!-- Dropdown -->
  <button class="c-button">
    <span class="c-button__icon c-icon c-icon--small">
      <!-- SVG element -->
    </span>
    <span class="c-button__label">Dropdown</span>
    <span
      class="c-button__chevron c-icon c-icon--extra-small"
    >
      <!-- SVG element -->
    </span>
  </button>
</div>