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

General Button Guidelines

  1. 1.
    Labels are always title case.
  2. 2.
    Labels are clear and succinct.
  3. 3.
    Labels are text only; characters, like carrots, are not used alongside text.
  4. 4.
    Labels are verbs or adverbs that express the action the button will trigger.
  5. 5.
    Icons links should only be used when representing common paradigms.

Button Width Guidelines

Button widths will vary depending on the context. As a rule of thumb, please refer to our grid measurements for button widths. Buttons can be up to 3 columns wide.

Usage of Buttons

Buttons allow users to trigger an action, like submitting information or confirming an action. They may take form in buttons, text links, or icon links.

Types of Buttons

Button CTAs

Button CTAs come in two sizes, Large and Small. Large CTA buttons are the primary CTA styles used across Desktop and Mobile Web. They are used when there is a main ask from the user that should be prioritized above other asks on the same page. Small CTA buttons (less commonly used) are available when there are multiple primary CTAs on the same page.

Primary Button CTA

Primary button CTAs are used for the most important action on the page. These buttons are opaque and come in two sizes, large and small.

Primary Large CTA Button Properties (default)

1
max-height: 57px
2
border-radius: 5px
3
color: blue-medium
4
font-family: Circular
5
font-size: 20px
6
font-color: white
7
padding-top: 16px
8
padding-bottom: 16px
Copied!

Primary Large CTA Button Properties (on hover)

1
max-height: 57px
2
border-radius: 5px
3
color: blue-dark
4
font-family: Circular
5
font-size: 20px
6
font-color: white
7
padding-top: 16px
8
padding-bottom: 16px
Copied!

Primary Small CTA Button Properties (default)

1
max-height: 44px
2
border-radius: 5px
3
color: blue-medium
4
font-family: Circular
5
font-size: 16px
6
font-color: white
7
padding-top: 12px
8
padding-bottom: 12px
Copied!

Primary Small CTA Button Properties (on hover)

1
max-height: 44px
2
border-radius: 5px
3
color: blue-dark
4
font-family: Circular
5
font-size: 16px
6
font-color: white
7
padding-top: 12px
8
padding-bottom: 12px
Copied!

Secondary Button CTAs

Secondary button CTAs are used for subordinate actions on the page. These buttons are transparent with an outline and come in two sizes, Large and Small.

Secondary Large Button CTA Properties (default)

1
border-radius: 5px
2
border-color: blue-medium
3
font-family: Circular
4
font-size: 20px;
5
font-color: blue-medium
6
padding-top: 16px
7
padding-bottom: 16px
Copied!

Secondary Large Button CTA Properties (on hover)

1
border-radius: 5px
2
border-color: blue-medium
3
font-family: Circular
4
font-size: 20px;
5
font-color: blue-dark
6
padding-top: 16px
7
padding-bottom: 16px
Copied!

Secondary Small Button CTA Properties (default)

1
border-radius: 5px
2
border-color: blue-medium
3
font-family: Circular
4
font-size: 16px;
5
font-color: blue-medium
6
padding-top: 14px
7
padding-bottom: 14px
Copied!

Secondary Small Button CTA Properties (on hover)

1
border-radius: 5px
2
border-color: blue-dark
3
font-family: Circular
4
font-size: 16px;
5
font-color: blue-dark
6
padding-top: 14px
7
padding-bottom: 14px
Copied!

Text Links

Text links are used for non-essential actions, like changes to existing content, viewing another page.
1
font: Circular-Book
2
font-size: 14px or 16px
3
font-color: blue-medium or slate-medium-dark
Copied!
1
Hover State for Text Links starting as blue-medium:
2
font: Circular-Book
3
font-size: 14px or 16px
4
font-color: blue-medium-dark
5
6
Hover State for Text Links starting as slate-dark:
7
font: Circular-Book
8
font-size: 14px or 16px
9
font-color: text-black
Copied!

Icon Links

Icon links are used to communicate the ability to execute common tasks, such as filtering a list. They are most commonly paired with text links.