Button

Default

Useful for making UI elements appear actionable:

<a class="Button" href="#meaningful-href">Link</a>
<button class="Button" type="button">Button</button>
<input class="Button" type="submit" value="Input">

When To Use The Button Element

<button class="Button">
  Default Button
</button>

<button class="Button" disabled>
  Default Button Disabled
</button>

<button class="Button is-active">
  Default Button Active
</button>

Primary

<button class="Button Button--primary">
  Primary Button
</button>

<button class="Button Button--primary" disabled>
  Primary Button Disabled
</button>

<button class="Button Button--primary is-active">
  Primary Button Active
</button>

Blue

<button class="Button Button--blue">
  Blue Button
</button>

<button class="Button Button--blue" disabled>
  Blue Button Disabled
</button>

<button class="Button Button--blue is-active">
  Blue Button Active
</button>

Orange

<button class="Button Button--orange">
  Orange Button
</button>

<button class="Button Button--orange" disabled>
  Orange Button Disabled
</button>

<button class="Button Button--orange is-active">
  Orange Button Active
</button>

Negative

<button class="Button Button--negative">
  Negative Button
</button>

<button class="Button Button--negative" disabled>
  Negative Button Disabled
</button>

<button class="Button Button--negative is-active">
  Negative Button Active
</button>

Sizes

<button class="Button Button--small">
  Small Button
</button>

<button class="Button Button--large">
  Large Button
</button>

<button class="Button Button--huge">
  Huge Button
</button>

Small Square

Button--smallSquare has the same height as Button--small, but also comes with a fixed width equal to the height. This button is intended for icons or symols rather than text.

<button class="Button Button--yes Button--smallSquare u-spaceRightMd">
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
  </svg>
</button>
<button class="Button Button--no Button--smallSquare u-spaceRightMd">
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z" />
  </svg>
</button>
<button class="Button Button--maybe Button--smallSquare u-spaceRightMd">
  <span class="u-textBold">?</span>
</button>

Status Option 1

There are a couple options for status buttons to suit different use cases.

One is when the button should be neutral by default, and indicate status once it is hovered or selected (as in a ButtonGroup).

Classes:

.Button--yesDefault
.Button--maybeDefault
.Button--noDefault

<div class="ButtonGroup js-ButtonGroupDemo" style="width: 250px">
  <button class="Button Button--yesDefault u-size1of3">
    Going
  </button>
  <button class="Button Button--maybeDefault u-size1of3">
    Maybe
  </button>
  <button class="Button Button--noDefault u-size1of3">
    No
  </button>
</div>

Status Option 2

There are a couple options for status buttons to suit different use cases.

One is when a secondary element exists to indicate state, or if the button should represent a status outside of a selected state.

Classes:

.Button--yes
.Button--maybe
.Button--no

<div class="Popup u-spaceRightMd" style="margin-top: 60px">
  <button class="Button Button--smallSquare Popup-toggle js-popupToggle">
  </button>
  <div class="Popup-container Popup-container--leftHang js-popupContainer is-open">
    <div class="Popup-content u-padSm">
      <div class="ButtonGroup js-ButtonGroupDemo">
        <button class="Button u-padSidesXs Button--yes u-size1of3">
          Going
        </button>
        <button class="Button u-padSidesXs Button--maybe u-size1of3">
          Maybe
        </button>
        <button class="Button u-padSidesXs Button--no u-size1of3">
          No
        </button>
      </div>
    </div>
  </div>
</div>
<button class="Button Button--yes Button--smallSquare u-spaceRightMd">
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
  </svg>
</button>
<button class="Button Button--no Button--smallSquare u-spaceRightMd">
  <svg viewBox="0 0 960 960" role="presentation" class="Icon">
    <path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z" />
  </svg>
</button>
<button class="Button Button--maybe Button--smallSquare u-spaceRightMd">
  <span class="u-textBold">?</span>
</button>

Web Style Guide

Getting Started

Design Elements

Utilities

Components

Help Docs