Button

Default Button

This is a default button. Buttons are useful for making <a>, <button> or <input type="submit"> elements appear actionable.

Default buttons can be used for particularly actionable links such as navigating to more detail about a product or feature. Buttons can also be used for neutral form actions that aren't particularly positive or negative such as a confirmation state (vs a creation state). Default buttons should be displayed on light or medium shaded backgrounds. Avoid displaying default buttons on dark backgrounds which will cause contrast issues.

<div>

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

<div>
  <a class="Button" href="#">Link</a>

  <input class="Button" type="submit" value="Input">
</div>

<div>

  <button class="Button ">
    <svg width="26" height="28" viewBox="0 0 26 28" class="Icon u-spaceRight06">
      <path d="M6 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM16.063 16.438l-10.656 10.656c-0.359 0.359-0.875 0.578-1.406 0.578s-1.047-0.219-1.422-0.578l-1.656-1.687c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.641-10.641c0.812 2.047 2.453 3.687 4.5 4.5zM25.969 9.641c0 0.516-0.187 1.156-0.359 1.656-0.984 2.781-3.656 4.703-6.609 4.703-3.859 0-7-3.141-7-7s3.141-7 7-7c1.141 0 2.625 0.344 3.578 0.984 0.156 0.109 0.25 0.25 0.25 0.438 0 0.172-0.109 0.344-0.25 0.438l-4.578 2.641v3.5l3.016 1.672c0.516-0.297 4.141-2.578 4.453-2.578s0.5 0.234 0.5 0.547z" />
    </svg> Inline Icon
  </button>
</div>

<div>

  <button class="Button ">
    <svg width="26" height="28" viewBox="0 0 26 28" class="Icon Icon--block u-flexExpandSides u-textGrow3 u-spaceBottom06">
      <path d="M6 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM16.063 16.438l-10.656 10.656c-0.359 0.359-0.875 0.578-1.406 0.578s-1.047-0.219-1.422-0.578l-1.656-1.687c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.641-10.641c0.812 2.047 2.453 3.687 4.5 4.5zM25.969 9.641c0 0.516-0.187 1.156-0.359 1.656-0.984 2.781-3.656 4.703-6.609 4.703-3.859 0-7-3.141-7-7s3.141-7 7-7c1.141 0 2.625 0.344 3.578 0.984 0.156 0.109 0.25 0.25 0.25 0.438 0 0.172-0.109 0.344-0.25 0.438l-4.578 2.641v3.5l3.016 1.672c0.516-0.297 4.141-2.578 4.453-2.578s0.5 0.234 0.5 0.547z" />
    </svg> Block Icon
  </button>
</div>

CTA Modifiers

The default button appearance can be modified to highlight a certain call to action (CTA) as important.

A primary button can be used within highlighted or featured sections in order to call attention to a particularly important CTA such as a "Buy Now" button. Primary buttons can be displayed on dark or light backgrounds.

Secondary buttons can be used for actions that require slightly more emphasis than the standard default button but are not quite as essential as primary button CTAs. Secondary buttons should be used on light backgrounds. Avoid displaying secondary buttons on medium shaded backgrounds which will cause contrast issues.

Outline buttons can be used for actions that should receive less attention when next to a primary or secondary button. Outline buttons work best against a light background (e.g., white background) to avoid contrast issues with the text.

Ghost buttons are designed to attract the least attention. They work well alongside the Default button. Ghost buttons work best against ligher background colors to avoid contrast issues with the text.

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

<button class="Button Button--secondary u-spaceEnds06">
  Secondary
</button>

<button class="Button Button--outline u-spaceEnds06">
  Outline
</button>

<button class="Button Button--ghost u-spaceEnds06">
  Ghost
</button>

<button class="Button u-spaceEnds06">
  Default
</button>

Directional Modifiers

The default button appearance can be modified to indicate whether a particular action is positive or negative.

A positive button can be used for scenarios where an action will result in an intended ideal user journey such as creation states, agreement acceptance, or form submission. Positive buttons should be used on light backgrounds. Avoid displaying positive buttons on medium shaded backgrounds which will cause contrast issues.

Negative buttons can be used for actions that require visual warning because their action will result in destructive or non-progressive user journeys such as deletion states, agreement rejection, or form cancellation. Negative buttons should be used on light backgrounds. Avoid displaying negative buttons on medium shaded backgrounds which will cause contrast issues.

<button class="Button Button--positive u-spaceEnds06">
  Positive
</button>

<button class="Button u-spaceEnds06">
  Neutral
</button>

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

Disabled Button

This is a disabled button.

Any type of button can be disabled. Disabled buttons can be used on light, medium, and dark backgrounds. Avoid displaying disabled buttons on silver colored backgrounds which will cause contrast issues.

<div>

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

<div>
  <a class="Button is-disabled" href="#">Link</a>

  <input class="Button" disabled type="submit" value="Input">
</div>

<div>

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

  <button class="Button Button--secondary" disabled>
    Secondary
  </button>

  <button class="Button Button--outline" disabled>
    Outline
  </button>

  <button class="Button Button--ghost" disabled>
    Ghost
  </button>
</div>

<div>

  <button class="Button Button--positive" disabled>
    Positive
  </button>

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

Loading State

Button components can be configured to have a "loading" state:

  1. Add a Button--withLoader modifier CSS class
  2. Wrap the button contents with a Button-content wrapper
  3. Add an is-loading state CSS class

Click the buttons in the demo below to toggle the is-loading state class:

<button class="Button Button--primary Button--withLoader is-loading u-spaceEnds06 js-loading-demo-btn">
  <span class="Button-content">
    Primary Button
  </span>
</button>

<button class="Button Button--withLoader is-loading u-spaceEnds06 js-loading-demo-btn">
  <span class="Button-content">
    Default Button
  </span>
</button>

<script>
  // The JavaScript below toggles the 'is-loading' class and
  // is for demo purposes only
  document.querySelectorAll('.js-loading-demo-btn')
    .forEach(button => {
      button.addEventListener(
        'click',
        e => e.currentTarget.classList.toggle('is-loading')
      )
    });
</script>