Style Guide
Search…
Buttons
Buttons communicate the action that will occur when a user taps them.

Usage of Buttons

Buttons allow users to trigger an action. They may take the form of buttons or text links.

General Button Guidelines

  1. 1.
    Labels are always title case
  2. 2.
    Labels clear and succinct
  3. 3.
    Labels are verbs or adverbs that express the action the button will trigger
  4. 4.
    Icons links should only be used when representing common paradigms
  5. 5.
    Buttons can be disabled but need to be conveyed by lowering the opacity to .4

Types of Buttons

Anatomy of Primary Button (button-[size]-primary)

Opaque, primary buttons are used for the most important action on a page. There should only be one primary button per page. Primary button come in 3 sizes: Large, Half Size, Small.
1. Label (a-text-button) Label text must follow the General Button Guidelines.
1
Large and Half Size:
2
font-weight: book
3
font-size: 20px;
4
font-color: white
5
6
padding: 16px
7
8
Small Size:
9
font-weight: book
10
font-size: 16px;
11
font-color: white
12
13
padding-left: 16px
14
padding-right: 16px
15
padding-top: 12px
16
padding-bottom: 12px
Copied!
2. Container Primary CTAs can have 3 different container sizes: Large, Half Size, Small
1
radius: 5px
2
color: blue-medium
3
4
Large:
5
max-width: 100% (343px)
6
max-height: 57px
7
margin: 16px
8
9
Half Size:
10
max-width: 50% (168px)
11
max-height: 57px
12
13
Small:
14
max-width: 50% (168px)
15
max-height: 44px
Copied!

Anatomy of Scroll Button

When the content is longer than the page and scroll is enabled, primary buttons can sit in a container that sticks at the bottom of the page.
1. Divider Line (a-divider-dark) For easy viewing and separation, scroll buttons have a divider line.
1
a-divider-dark:
2
max-width: 375px
3
max-height: 1px
4
color: slate-medium-light
5
padding-bottom: 16px
Copied!
2. Container
1
max-height: 89px
2
padding: 16px
3
background-color: *match to page background*
Copied!
4. Supporting Info (Optional) When a scroll CTA has corresponding support information like the PreClaim state of the JDP, the container can be split with copy and Half Size Primary CTA. The copy must have a title (a-text-h3) and supporting copy like pricing.

Anatomy of Secondary Button (button-[size]-secondary)

Transparent secondary CTA buttons are used for subordinate actions. There can be multiple secondary CTAs per page.
1. Label (a-text-button) Label text must follow the General Button Guidelines.
1
Large and Half Size:
2
font-weight: book
3
font-size: 20px
4
font-color: blue-medium
5
6
padding: 16px
7
8
Small Size:
9
font-weight: book
10
font-size: 16px
11
font-color: blue-medium
12
13
padding-left: 16px
14
padding-right: 16px
15
padding-top: 12px
16
padding-bottom: 12px
Copied!
2. Container Secondary CTAs can have 3 different container sizes: Large, Half Size, Small
1
radius: 5px
2
border-width: 1px
3
border-color: blue-medium
4
5
Large:
6
max-width: 100% (343px)
7
max-height: 57px
8
margin: 16px
9
10
Half Size:
11
max-width: 50% (168px)
12
max-height: 57px
13
14
Small:
15
max-width: 50% (168px)
16
max-height: 44px
Copied!

Anatomy of Icon Button

To give half size or small secondary buttons more visual interest, icons (that represent the label) can be used.
1. Label Font Awesome (a-icon-line) is used for the icon. The size of the Font Awesome icon must match the size of the label text.
1
Large and Half Size:
2
font-weight: book
3
font-size: 20px
4
font-color: blue-medium
5
6
padding: 16px
7
8
Small Size:
9
font-weight: book
10
font-size: 16px
11
font-color: blue-medium
12
13
padding-left: 16px
14
padding-right: 16px
15
padding-top: 12px
16
padding-bottom: 12px
17
18
font-awesome codes:
19
[comment] - used for messaging actions
20
[envelope] - used for email actions (reccomendation, sending an invite)
21
[phone] - used for calling actions
Copied!
2. Container Icon Buttons can have 2 different container sizes: Half Size, Small
1
radius: 5px
2
border-width: 1px
3
border-color: blue-medium
4
5
Half Size:
6
max-width: 50% (168px)
7
max-height: 57px
8
9
Small:
10
max-width: 50% (168px)
11
max-height: 44px
Copied!

Anatomy of Link CTA

Link CTAs are used for non-essential actions, like changes to existing content.
1. Label (a-text-paragraph) Label text must follow the General Button Guidelines.
1
font-weight: book
2
font-size: 16px
3
font-color: blue-medium
Copied!

Last modified 2yr ago