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

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--light u-space-bottom-4 u-space-bottom-0-lg">
      <div>
        <button class="btn btn--primary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--cream">
      <div>
        <button class="btn btn--primary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
</div>

Primary Alternative Button

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--rust u-space-bottom-4 u-space-bottom-0-lg">
      <div>
        <button class="btn btn--primary-alt u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary-alt u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary-alt btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--dark">
      <div>
        <button class="btn btn--primary-alt u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary-alt u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--primary-alt btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
</div>

Secondary Button

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--light u-space-bottom-4">
      <div>
        <button class="btn btn--secondary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--cream u-space-bottom-4">
      <div>
        <button class="btn btn--secondary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--rust u-space-bottom-4 u-space-bottom-0-lg">
      <div>
        <button class="btn btn--secondary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--dark">
      <div>
        <button class="btn btn--secondary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
</div>

Secondary Alternative Button

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--light u-space-bottom-4 u-space-bottom-0-lg">
      <div>
        <button class="btn btn--secondary-alt u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary-alt u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary-alt btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--cream">
      <div>
        <button class="btn btn--secondary-alt u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary-alt u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--secondary-alt btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
</div>

Tertiary Button

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--light u-space-bottom-4 u-space-bottom-0-lg">
      <div>
        <button class="btn btn--tertiary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--tertiary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--tertiary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-10 sample-block--cream">
      <div>
        <button class="btn btn--tertiary u-space-bottom-6">Shop All</button>
      </div>
      <div>
        <button class="btn btn--tertiary u-space-bottom-6" disabled="">Shop All</button>
      </div>
      <div>
        <button class="btn btn--tertiary btn--loading u-space-bottom-0" disabled="">Shop All</button>
      </div>
    </div>
  </div>
</div>

Text Buttons

Dark Text Buttons

View Source 
1
2
3

<div class="sample-block sample-block--padded-6 sample-block--light">
  <button class="text-btn-dark u-space-right-6">Shop All</button><button class="text-btn-dark" disabled="">Shop All</button>
</div>

Light Text Buttons

View Source 
1
2
3
4

<div class="sample-block sample-block--padded-6 sample-block--dark">
  <button class="text-btn-light u-space-right-6">Shop All</button><button class="text-btn-light" disabled="">Shop All</button>
</div>

Text Links

Dark Text Links

Shop AllShop All
View Source 
1
2
3
4

<div class="sample-block sample-block--padded-6 sample-block--light">
  <span class="text-link-dark u-space-right-6">Shop All</span><span class="text-link-dark" disabled="">Shop All</span>
</div>

Light Text Links

Shop AllShop All
View Source 
1
2
3
4

<div class="sample-block sample-block--padded-6 sample-block--dark">
  <span class="text-link-light u-space-right-6">Shop All</span><span class="text-link-light" disabled="">Shop All</span>
</div>

Inline Button

Primary & Secondary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--light u-space-bottom-4 u-space-bottom-0-lg u-space-bottom-n2">
      <button class="btn btn--inline btn--primary u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--secondary">Shop All</button>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--cream u-space-bottom-n2">
      <button class="btn btn--inline btn--primary u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--secondary">Shop All</button>
    </div>
  </div>
</div>

Primary Alt & Secondary Alt

View Source 
1
2
3
4
5
6
7
8

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--cream u-space-bottom-n2">
      <button class="btn btn--inline btn--primary-alt u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--secondary-alt">Shop All</button>
    </div>
  </div>
</div>

Primary Alt & Secondary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--rust u-space-bottom-4 u-space-bottom-0-lg u-space-bottom-n2">
      <button class="btn btn--inline btn--primary-alt u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--secondary">Shop All</button>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--cream u-space-bottom-n2">
      <button class="btn btn--inline btn--primary-alt u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--secondary">Shop All</button>
    </div>
  </div>
</div>

Primary & Tertiary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--light u-space-bottom-4 u-space-bottom-0-lg u-space-bottom-n2">
      <button class="btn btn--inline btn--primary u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--tertiary">Shop All</button>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--padded-6 sample-block--cream u-space-bottom-n2">
      <button class="btn btn--inline btn--primary u-space-right-5 u-space-bottom-2">Shop All</button><button class="btn btn--inline btn--tertiary">Shop All</button>
    </div>
  </div>
</div>

Button with Alternate Action

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

Primary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--light sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <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>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-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>
  </div>
</div>

Secondary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--rust sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <div class="btn-group">
        <button class="btn btn--secondary btn-group__main-action">Join The Club</button><button class="btn btn--secondary btn-group__alt-action">?</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--dark sample-block--padded-6">
      <div class="btn-group">
        <button class="btn btn--secondary btn-group__main-action">Join The Club</button><button class="btn btn--secondary btn-group__alt-action">?</button>
      </div>
    </div>
  </div>
</div>

Tertiary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--light sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <div class="btn-group">
        <button class="btn btn--tertiary btn-group__main-action">Join The Club</button><button class="btn btn--tertiary btn-group__alt-action">?</button>
      </div>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <div class="btn-group">
        <button class="btn btn--tertiary btn-group__main-action">Join The Club</button><button class="btn btn--tertiary btn-group__alt-action">?</button>
      </div>
    </div>
  </div>
</div>

Button with Icon

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

Primary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--light sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <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>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <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>
    </div>
  </div>
</div>

Primary Alt

View Source 
1
2
3
4
5
6
7
8

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <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>
    </div>
  </div>
</div>

Secondary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--light sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <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>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <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>
    </div>
  </div>
</div>

Secondary Alt

View Source 
1
2
3
4
5
6
7
8

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <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>
    </div>
  </div>
</div>

Tertiary

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="row">
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--light sample-block--padded-6 u-space-bottom-4 u-space-bottom-0-lg">
      <button class="btn btn--tertiary">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button>
    </div>
  </div>
  <div class="col--lg-4-of-8">
    <div class="sample-block sample-block--cream sample-block--padded-6">
      <button class="btn btn--tertiary">Get Another <span class="u-context-object u-align-right u-vertically-center-to-context" custicon="chevron-right"></span></button>
    </div>
  </div>
</div>

Button Samples

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

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="u-space-bottom-6">
  <button class="btn btn--primary">Shop All</button>
</div>
<div class="u-space-bottom-6">
  <button class="btn btn--secondary">Shop All</button>
</div>
<div class="u-space-bottom-6">
  <button class="btn btn--tertiary">Shop All</button>
</div>
<div class="u-space-bottom-6">
  <input class="btn btn--primary" type="button" value="Shop All" />
</div>
<div class="u-space-bottom-6">
  <input class="btn btn--secondary" type="button" value="Shop All" />
</div>
<div>
  <input class="btn btn--tertiary" type="button" value="Shop All" />
</div>