Button

Easily create versatile buttons in a variety of styles.

Usage


  <button class="button">
    <span class="button__text">Button</span>
  </button>

Link

Open this example in a new window


  <a class="button" href="">
    <span class="button__text">Link button</span>
  </a>

Toggle

Open this example in a new window


  <button class="button is-active" data-module="Toggle" data-options="{target: parent, activeClass: is-active}">
    <span class="button__text">Toggle button</span>
  </button>

Sizes

Open this example in a new window


  <button class="button button--lg">
    <span class="button__text">Large button</span>
  </button>

Open this example in a new window


  <button class="button button-sm">
    <span class="button__text">Small button</span>
  </button>

Icon

Open this example in a new window


  <button class="button" aria-label="Toggle">
    <span class="icon icon--plus">
      <svg viewBox="0 0 1 1">
        <use xlink:href="../images/icons.svg#plus"></use>
      </svg>
    </span>
  </button>