Buttons

The SCSS variables for modifying button styles can be found in the _brand.scss file, in the "Buttons" section.

This button hierarchy shown below can be applied to any button class (e.g. default button, primary button, info button).

The "expanded" class is added to buttons for demonstration purposes only.

Sizes 

  • 
<button>
  No style
</button>
<button class="button">
  Default
</button>
<button class="button large">
  Large
</button>
<button class="button medium">
  Medium
</button>
<button class="button small">
  Small
</button>
<button class="button tiny">
  Tiny
</button>

Primary CTA

Primary CTA is used for major calls to action, such as "Add to cart" and "Checkout." 

  • 
<button class="button expand">
  Default
</button>
<button class="button expand hover">
  Hover
</button>
<button class="button expand disabled">
  Disabled
</button>
<button class="button expand success">
  Success
</button>
<button class="button expand warning">
  Advisory
</button>
<button class="button expand loading">
  Loading...
</button>

Framed CTA 

  • 
<button class="button button--framed expand">
  Default
</button>
<button class="button button--framed expand hover">
  Hover
</button>
<button class="button button--framed expand disabled">
  Disabled
</button>

Tertiary CTA

For lesser prominence, Tertiary CTA does not include a background. This treatment is seen in places like "See results for" and "Save for later." 

  • 
<button class="button button--tertiary expand">
  Default
</button>
<button class="button button--tertiary expand hover">
  Hover
</button>
<button class="button button--tertiary expand disabled">
  Disabled
</button>

Link CTA 

  • 
<button class="button button--link">
  Default
</button>
<button class="button button--link hover">
  Hover
</button>
<button class="button button--link disabled">
  Disabled
</button>