CTA: Button > Primary

This component helps users perform important actions.

Usage Criteria

This component helps users carry out important actions on the website, such as loading information, submitting forms, and more.

Do's and Don'ts

• Do use this component for important actions that users should pay attention to (ie. Submit button for a form).
• Do not use this component for secondary actions that are not as important (ie. Do not use this as a "back to previous page" button in a multi-step form).
• Do not put multiples of this component directly side by side or stacked. If there are multiple CTA buttons on a page, please have some dividing content in between the components.

Design Notes

If there are two actions needed on a page in close proximity, this component can be paired with CTA: Button > Secondary, which draws less attention than the CTA: Button > Primary but still performs actions.

While it is possible to have more than one per page, avoiding that and limiting to one will give the button more impact and be less distracting.

Configurable Options

This component is configured with a CTA label and URL. The layout can also be changed using Button Alignment so the button is either left aligned or centered on the page.

Developer Notes

Designer Notes