Skip to content

CTA Button

CTA Buttons perform an action on the page or submit a form.

Overview

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.

Usage

CTA Button

The base CTA Button that supports the use of variants.

Primary CTA Button

The primary variant of CTAButton. These are used for performing routine tasks.

Secondary CTA Button

The secondary variant of CTAButton. These should be used to perform an action other than the primary task.

Destructive CTA Button

The destructive variant of CTAButton. Destructive should only be used for destructive actions.

Content

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.

Accessibility

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.

Variations

Full Width

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".

Chevron Icon

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.

Customising variants

We can use the theme to either override the default variants, or add to them.

Available Variants

Properties

NameValuesDefault

iconLeft

offcaret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

off

iconRight

offcaret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

off

fullWidth

alwaysneversmall

small

variant

primarysecondarydestructive

primary

...

JSX.IntrinsicElements["button"]

Tokens