Skip to content

CTA Link

CTA Links direct users to a different page to complete an action.

Overview

CTA links direct users to a different page in order to complete an action. If no action is required on the new page Text Links should be used instead.

Usage

The base CTA Link that supports the use of variants.

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

The secondary variant of CTALink.

Content

CTAs should be succinct and precise, here are some useful tips:

  • 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 Links are responsive by default and will be displayed as full width below the smallest breakpoint. You can override this by setting fullWidth="always" and fullWidth="never".

Using React Router

If you are using react router for internal linking pass Link from react-router-dom to the as property which will change the underlying element.

Map

New Window

Links can be set to open in a new window by adding the opensInNewWindow prop. This will set the link target to _blank and display the new window icon. Screen reader users will hear opens in new window.

Customising variants

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

Custom variant

Available Variants

Properties

NameValuesDefault

iconLeft

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

off

iconRight

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

chevron-right

fullWidth

alwaysneversmall

small

variant

primarysecondarydestructive

primary

opensInNewWindow

Boolean

false

...

JSX.IntrinsicElements["a"]

Tokens