Buttons
The primary call to action must be clear and visible in any medium. The digital space is no different. We must make sure the user always knows what items can be clicked or touched and where the primary task can be done.
To maintain elements that are usable for all form factor sizes, we have created larger touch targets. The minimum touch target size is 44px. Having buttons, text links, action and utility buttons with this larger touch target enables our users to easily recognize the action as well as easily interact with the experience.
Default Button
Emphasis: Medium
Default buttons are used in most situations. Use these buttons for module-level actions, and when there are repeating actions in the same area.
Default State
- Button
- background-color: Blue
- border: none
- border-radius: 4px
- Text
- White Button Text
Additional States
Hover
- background-color: Teal Hover
Active
- background-color: Teal Active
Disabled
- background-color: opacity 50%
Prominent Button
Emphasis: High
Prominent buttons are used for primary page-level actions, and should only be used once per page. Not all pages require a Prominent button. Use for call-to-actions, page navigation or process flows.
Examples:
- “Enroll Today” (entering the primary flow of the experience)
- “Purchase Now” (primary point of sale)
- “Next” (primary navigation to next page)
Default State
- Button
- background-color: Blue
- border: none
- border-radius: 4px
- Text
- White Button Text
Additional States
Hover
- background-color: Blue Hover
Active
- background-color: Blue Active
Disabled
- background-color: opacity 50%
Subtle Buttons
Emphasis: Low
Outlined buttons are used for less prominent actions. They can be paired with Default or Primary buttons. They should be used sparingly by themselves.
Default State
- Button
- background-color: none
- border: none
- border-color: Blue
- border-radius: 4px
- Text
- Blue Button Text
Additional States
Hover
- background-color: Blue Hover
Active
- background-color: Blue Active
Disabled
- background-color: opacity 50%
Ghost Buttons
Emphasis: Lowest
Ghost buttons are available for when an additional level of hierarchy is needed. Ghost buttons have the smallest footprint, and should be used sparingly.
Default State
- Button
- background-color: none
- border: none
- Text
- Ghost Button Text
Additional States
Hover
- background-color: Gray F
- border-radius: 4px
- opacity: 50%
- Text
- color: Blue Hover
Active
- background-color: Gray F
- border-radius: 4px
- opacity: 100%
- Text
- color: Blue Active
Disabled
- background-color: opacity 50%
Icon Buttons
Emphasis: Lowest
Default State
- background-color: none
- border: none
- Button Text
- font-face: FontAwesome5ProLight
- font-size: 20px
- text-color: Gray A
- line-height: 24px
Additional State
Hover/Focus
- background-color: Gray F
Button Usage
There are a range of button styles available to accommodate diverse needs across products. It’s important to use these styles to maintain a clear hierarchy on the page.
Example 1 - Ecommerce
Subtle Button | Low Emphasis
Used to place emphasis on the primary call-to-action on the page.
Prominent Button | High Emphasis
Used for a supporting compenent-level action.
Default Button | Medium Emphasis
Used for the primary component-level action.
Ghost Button | Lowest Emphasis
Used in the module with the lowest emphasis on the page.
Example 2 - Product
Prominent Button | High Emphasis
Used to place emphasis on the primary call-to-action on the page.
Subtle Buttons | Low Emphasis
Used for a low-emphasis page-level action and used as the as the opposite action.
Default Button | Medium Emphasis
Used for the primary component-level action.
Ghost Button | Lowest Emphasis
Used in the module with the lowest emphasis on the page.