CTA Buttons perform an action on the page or submit a form.
CTA button is used to perform an action when clicked. Please note that, when taking the user to a new location, a CTA Link should be used instead.
The base CTA Button that supports the use of variants.
The primary variant of CTAButton. These are used for performing routine tasks.
The secondary variant of CTAButton. These should be used to perform an action other than the primary task.
The destructive variant of CTAButton. Destructive should only be used for destructive actions.
CTAs should be succinct and precise:
- Always use sentence case.
- Always use active language.
- Always be specific.
- Avoid repeating the same language you've used in a Heading.
- Avoid the use of personal possessive pronouns. This helps to keep the copy short.
In order to avoid confusion while using screen readers each CTA on a page should be unique. If this isn’t possible, use Visually Hidden.
CTA Buttons by default will be responsive and will be displayed as full width below the smallest breakpoint. This can be overriden by setting fullWidth="always" and fullWidth="never".
Multi-part forms with CTAs like ‘Next’ or ‘Save & Continue’ should be buttons (because they submit forms). Including a chevron indicates that the journey is not complete.
We can use the theme to either override the default variants, or add to them.