Button

<a
  href="/"
  class="button"
  >
  Sign in
</a>

<a
  href="/"
  class="button button--primary"
  >
  Sign in
</a>

<a
  href="/"
  class="button button--tertiary"
  >
  Sign in
</a>

<a
  href="/"
  class="button"
  >
  <svg class="icon"><use xlink:href="#icon-plus"></use></svg>
  Add
</a>

<a
  href="/"
  class="button"
  >
  Options
  <svg class="icon"><use xlink:href="#icon-chevron-down"></use></svg>
</a>

<a
  href="/"
  class="button button--compound"
  >
  <span class="button__label">Download</span>
  <span class="button__icon">
    <svg class="icon"><use xlink:href="#icon-chevron-down"></use></svg>
  </span>
</a>

<a
  href="/"
  class="button button--small"
  >
  Sign in
</a>

<a
  href="/"
  class="button button--medium"
  >
  Sign in
</a>

<a
  href="/"
  class="button button--large"
  >
  Sign in
</a>

<button
  type="submit"
  class="button"
  >
  Submit
</button>

<button type="submit" class="button button--round button--small">
  <svg aria-label="Close" class="icon icon--small" width="24" height="24">
    <use xlink:href="#icon-close"></use>
  </svg>
</button>
<button type="submit" class="button button--round button--large">
  <svg aria-label="Close" class="icon icon--large" width="24" height="24">
    <use xlink:href="#icon-close"></use>
  </svg>
</button>

<button type="submit" class="button button--round dropshadow--soft">
  <svg aria-label="Close" class="icon icon--small" width="24" height="24">
    <use xlink:href="#icon-close"></use>
  </svg>
</button>

<button type="submit" class="button button--round button--small button--tertiary">
  <svg aria-label="Search" class="icon icon--small" width="24" height="24">
    <use xlink:href="#icon-search"></use>
  </svg>
</button>