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.Labels are always title case
- 2.Labels clear and succinct
- 3.Labels are verbs or adverbs that express the action the button will trigger
- 4.Icons links should only be used when representing common paradigms
- 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
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
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
font-weight: book
2
font-size: 16px
3
font-color: blue-medium
Copied!
​
​
Last modified 2yr ago