Buttons and Links
Overview
Buttons and links are used to trigger actions when the user clicks on them.
- Primary Button
- Secondary Button
Primary buttons are used for the most important action on the page. This can vary from "Learn more" on a page, downloading an asset, submitting a form, adding a product to your cart, or about a product. A primary button should only be used once per page.
Secondary buttons are used when subsequent actions are needed on a page. Examples are: "Where to Buy" on product pages, "Submit", or "Learn more". A secondary button can be used more than once per page, but, not excessively.
Variations
Use the light or dark color background for best contrast and visibility on page.
- Primary Text Link
- Secondary Text Link
Use the Primary text link next to a Primary button for additional actions on a page, and in-line with a related primary action button. Can also be used by itself. Used for Resource Cards and other downloadable assets.
Secondary Text Links are used by themselves, not next to a button. These are for Promotional content areas, such as on the homepage or in the navigation, or occasionally on pages where content needs to standout more.
Guidelines
“If everything looks important, then nothing is important.” ― Patrick Lencioni
Use When
- Providing a piece of content related to the main page
- Providing a next step that the user needs to take
- Adding visual prominence to an action
- Buttons should be used sparingly. Each additional button on a page has the potential to create confusion and reduce the visual prominence of the primary action.
Content
- Ensure button label clearly conveys the action that will occur when users click or tap on the button.
- Label should be action-oriented and set expectations for what the user will see next.
- Label should be 1–3 words and will fit on one line.
Authoring
Component
- Buttons should be added inside the Simple Container component, typically below a text component, to support the message.
- There are two CTA style options inside the component: Button or Text
- There are 5 CTA Color Options. Only use the ones specified above for buttons and/or links.
- If link is external, or link to a form, choose to Open in New Window. For all other cases, choose Same Window option.