Buttons

Buttons assume the full width of its container, which will generally be the width of a column unless specified with the inline option.

Height: 48px (12 baselines)
Padding: 20px left and right
Font Size: 14px

Primary Button

1
2
3
4
5
6
7
8
9
<div>
  <button class="btn btn--primary">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary" disabled="">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--loading" disabled="">Add To Cart</button>
</div>

Primary Alternative Button

1
2
3
4
5
6
7
8
9
10
<div>
  <button class="btn btn--primary-alt">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary-alt" disabled="">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary-alt btn--loading" disabled="">Add To Cart</button>
</div>

Secondary Button

1
2
3
4
5
6
7
8
9
10
<div>
  <button class="btn btn--secondary">Add To Cart</button>
</div>
<div>
  <button class="btn btn--secondary" disabled="">Add To Cart</button>
</div>
<div>
  <button class="btn btn--secondary btn--loading" disabled="">Add To Cart</button>
</div>

Secondary Alternative Button

1
2
3
4
5
6
7
8
9
10
<div>
  <button class="btn btn--secondary-alt">Add To Cart</button>
</div>
<div>
  <button class="btn btn--secondary-alt" disabled="">Add To Cart</button>
</div>
<div>
  <button class="btn btn--secondary-alt btn--loading" disabled="">Add To Cart</button>
</div>

Text Buttons

Dark Text Buttons

1
2
3
4
5
6
<div>
  <button class="text-btn-dark">Add To Cart</button>
</div>
<div class="u-space-top-2">
  <button class="text-btn-dark" disabled="">Add To Cart</button>
</div>

Light Text Buttons

1
2
3
4
5
6
7
<div>
  <button class="text-btn-light">Add To Cart</button>
</div>
<div class="u-space-top-2">
  <button class="text-btn-light" disabled="">Add To Cart</button>
</div>

Text Links

Dark Text Links

The quick brown fox jumped over the lazy dog.
1
2
3
4
<div>
  The quick brown fox  <span class="text-link-dark">jumped over</span>  the lazy dog. 
</div>

Light Text Links

The quick brown fox jumped over the lazy dog.
1
2
3
4
<div>
  The quick brown fox  <span class="text-link-light">jumped over</span>  the lazy dog. 
</div>

Inline Button

1
2
3
4
<div>
  <button class="btn btn--primary btn--inline u-space-right-2">Add To Cart</button><button class="btn btn--secondary btn--inline u-space-right-2">Add To Cart</button>
</div>
1
2
3
4
<div>
  <button class="btn btn--primary-alt btn--inline u-space-right-2">Add To Cart</button><button class="btn btn--secondary-alt btn--inline u-space-right-2">Add To Cart</button>
</div>

Button Variations

Button with Alternate Action

Offers an alternate action the user can take on the side.

Only supports buttons with no outlines at the moment

1
2
3
<div class="btn-group">
  <button class="btn btn--primary btn-group__main-action">Join The Club</button><button class="btn btn--primary btn-group__alt-action">?</button>
</div>
1
2
3
4
<div class="btn-group">
  <button class="btn btn--primary-alt btn-group__main-action">Join The Club</button><button class="btn btn--primary-alt btn-group__alt-action">?</button>
</div>

Button with Icon

This is an example of positioning an icon within a button.

1
2
<button class="btn btn--primary">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button><button class="btn btn--secondary">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button>
1
<button class="btn btn--primary-alt">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button><button class="btn btn--secondary-alt">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button>

Button Samples

Example behavior of buttons where tapping will transition the buttons into a loading state.


1
<button class="btn btn--primary">Add To Cart</button><br /><button class="btn btn--secondary">Add To Cart</button>

1
<button class="btn btn--primary-alt">Add To Cart</button><br /><button class="btn btn--secondary-alt">Add To Cart</button>