Button Sizes

Regular and Large buttons assume the full width of its container, which will generally be the width of a column.

Regular
Height: 48px (12 baselines)
Padding: 20px left and right
Font Size: 12px
Large
Height: 64px (16 baselines)
Padding: 36px left and right
Font Size: 14px

The secondary button is a smaller button with different hover/active styles and no outline variation. Unlike the primary buttons, the secondary buttons are always inline and will not take up the width of its container.

Regular
Height: 24px (6 baselines)
Padding: 20px left and right
Font Size: 10px

Button Styles

Primary Button

Regular Size

1
2
3
4
5
6
7
8
9
10
11
12
<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--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--outline" disabled="">Add To Cart</button>
</div>

Primary Button

Large Size

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <button class="btn btn--primary btn--large">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--large" disabled="">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--large btn--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--large btn--outline" disabled="">Add To Cart</button>
</div>

Black Button

Regular Size

1
2
3
4
5
6
7
<div>
  <button class="btn btn--black btn--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--black btn--outline" disabled="">Add To Cart</button>
</div>

Black Button

Large Size

1
2
3
4
5
6
7
<div>
  <button class="btn btn--black btn--large btn--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--black btn--large btn--outline" disabled="">Add To Cart</button>
</div>

White Button

Regular Size

1
2
3
4
5
6
7
<div>
  <button class="btn btn--white btn--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--white btn--outline" disabled="">Add To Cart</button>
</div>

White Button

Large Size

1
2
3
4
5
6
7
<div>
  <button class="btn btn--white btn--large btn--outline">Add To Cart</button>
</div>
<div>
  <button class="btn btn--white btn--large btn--outline" disabled="">Add To Cart</button>
</div>

Text Buttons

Dark Text Buttons

1
2
3
4
5
6
7
<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

Regular Size

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

Inline Button

Large Size

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

Loading Styles

Primary Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <button class="btn btn--primary btn--loading" disabled="">Add to Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--large btn--loading" disabled="">Add to Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--outline btn--loading" disabled="">Add to Cart</button>
</div>
<div>
  <button class="btn btn--primary btn--large btn--outline btn--loading" disabled="">Add to Cart</button>
</div>

White Buttons

1
2
3
4
5
6
7
<div>
  <button class="btn btn--white btn--outline btn--loading" disabled="">Add to Cart</button>
</div>
<div>
  <button class="btn btn--white btn--large btn--outline btn--loading" disabled="">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
4
5
6
<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>
<div class="btn-group">
  <button class="btn btn--primary btn--large btn-group__main-action">Join The Club</button><button class="btn btn--primary btn--large 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 btn--outline">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button>

Button Samples

Primary Buttons

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

1
2
3
4
5
6
<button class="btn btn--primary">Add To Cart</button>
<button class="btn btn--primary btn--outline">Add To Cart</button>
<button class="btn btn--primary btn--large">Add To Cart</button>
<button class="btn btn--primary btn--large btn--outline">Add To Cart</button>
<button class="btn btn--black btn--outline">Add To Cart</button>
<button class="btn btn--black btn--large btn--outline">Add To Cart</button>
1
2
<button class="btn btn--white btn--outline">Add To Cart</button>
<input class="btn btn--white btn--large btn--outline" type="button" value="Add To Cart" />