Pattern Library

Buttons

Form elements range from buttons to inputs, checkboxes, selects and popovers. These are most commonly found in forms, but are also present in many other aspects of an interface.

Button Types

Buttons are categorized by style – primary, standard, and flat. Primary buttons are blue with white button text, and standard buttons are transparent with dark gray text and border color. Flat buttons draw less focus and are simpler, making them useful for placing inside container elements like cards or in layouts with repeating actions.

<button class="button button--primary">Primary</button>
<button class="button">Standard</button>
<button class="button button--flat">Flat Button</button>

Anchor and input buttons

To style an anchor (a) tag as a button use the button class. To style an input as a button use the .button class and define a label by adding a value attribute.

<a class="button button--primary" href="#">Anchor button</a>
<input class="button button--flat" type="button" value="button input">

Icons

Adding an icon to a button can add clarity and draw focus to specific actions. They’re also useful for responsive design where labels can be removed to make better use of space on smaller devices. Icons can be added to buttons by wrapping an svg and text in a .button__inner div inside the button element.

<button class="button button--primary">
  <div class="button__inner">
    <svg class="button__icon button__icon--left">...</svg>
    <div class="button__text">Primary</div>
  </div>
</button>

<button class="button button--flat" >
  <div class="button__inner">
    <svg class="button__icon button__icon--left">...</svg>
    <div class="button__text">Flat Button</div>
  </div>
</button>

<button class="button button--grey">
  <div class="button__inner">
    <svg class="button__icon button__icon--left">...</svg>
    <div class="button__text">Grey Button</div>
  </div>
</button>

Icon Only Buttons

Buttons can contain no text and only an icon. Make sure to include a tooltip to clarify the function of the icon to remove any ambiguity.

<button class="button button--iconOnly button--circular button--flat" data-toggle="tooltip" data-placement="bottom" title="Add Collaborators">
  <div class="button__inner">
    <svg class="button__icon">...</svg>
  </div>
</button>

<button class="button button--iconOnly button--flat" data-toggle="tooltip" data-placement="bottom" title="Create New">
  <div class="button__inner">
    <svg class="button__icon">...</svg>
  </div>
</button>

<button class="button button--iconOnly button--circular button--grey" data-toggle="tooltip" data-placement="bottom" title="Add Collaborators">
  <div class="button__inner">
    <svg class="button__icon">...</svg>
  </div>
</button>

<button class="button button--iconOnly button--grey" data-toggle="tooltip" data-placement="bottom" title="Create New">
  <div class="button__inner">
    <svg class="button__icon">...</svg>
  </div>
</button>

States

Buttons can be given states outside of the standard hover, active and focus states. It’s important to communicate to the user that a button is disabled, or that it is unclickable because something is loading.


Loading

If a button loads something and and should remain unclickable while loading, a spinner should be used to show that something is happening (rather than simply disabling the button).

<button class="button button--primary">
  <div class="button__inner">
    <div class="spinner spinner--white spinner--xsmall">
      <svg class="spinner__wrapper" viewBox="25 25 50 50">
        <circle class="spinner__background" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="button__text">Click to load</div>
  </div>
</button>

<button class="button">
  <div class="button__inner">
    <div class="spinner spinner--xsmall">
      <svg class="spinner__wrapper" viewBox="25 25 50 50">
        <circle class="spinner__background" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="button__text">Click to load</div>
  </div>
</button>

<button class="button button--flat">
  <div class="button__inner">
    <div class="spinner spinner--xsmall">
      <svg class="spinner__wrapper" viewBox="25 25 50 50">
        <circle class="spinner__background" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="button__text">Click to load</div>
  </div>
</button>

Disabled

Add disabled to a button to visually fade it to 20% opacity and appear inactive. Only disable a button if it’s clear to the user why it is disabled. In most cases it’s better to allow the user to click a button and be given inline feedback to highlight what they need to do in order to continue.

<button disabled class="button button--primary">Primary</button>
<button disabled class="button">Standard</button>
<button disabled class="button button--flat">Flat Button</button>