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>

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.

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

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

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

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>

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>
</div>

<div>

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

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