Download Icon Save this file to your device

Jerk Mode


Semantic Buttons

<button
  class="button
         button--primary
         button--large
         button--solid">
  Save
</button>
<button
  aria-busy="true" 
  class="button
         button--secondary
         button--medium
         button--solid">
  <svg 
    aria-hidden="true" 
    class="icon-download">
    <use xlink:href="#icon-download"></use>
  </svg>
  <span>
    Busy
  </span>
</button>
<button
  class="button
         button--tertiary
         button--small
         button--hollow">
  Cancel
</button>

Malformed buttons

Improper tag

Save
<a
  class="button
         button--primary
         button--small
         button--solid">
  Save
</a>

Button as link

<button
  href="https://cantina.co/"
  class="button
         button--secondary
         button--medium
         button--hollow">
  Save
</button>