On this page

CTA Link

Navigate users to another page or URL with a prominent, action-oriented link.

Overview
Rules and guidance
Properties
Styles
Accessibility

When to use

To navigate the user to a different page or URL as a clear, prominent call to action
When the destination is the next step in a journey, such as "View account" or "See full details"
When a high-visibility link is needed and the action is navigating rather than triggering something on the current page

When not to use

To trigger an action on the current page - use CTA Button instead. Buttons act; links navigate. Using a link element for a same-page action breaks the semantic contract of HTML and confuses assistive technology.
For inline navigation within a sentence or paragraph - use Text Link instead. CTA Link is a standalone control and disrupts reading flow when placed inside body text.

Anatomy

Label
Right icon (default: chevron-right; can be suppressed or replaced)
Left icon (optional)

Basic usage

Edit live code

<CTALink href="" variant="primary">Plant a tree</CTALink>

Variants and features

Primary

Use for the main navigational call to action on a page or in a section. There should be at most one primary CTA Link per section.

Edit live code

<PrimaryCTALink href="">Plant a tree</PrimaryCTALink>

Secondary

Use for supporting navigational actions that sit alongside a primary button or link, such as "View details" next to "Get started".

Edit live code

<SecondaryCTALink href="">Find out more about trees</SecondaryCTALink>

Tertiary

Use for low-emphasis navigational actions that are available but not the focus of the page.

Edit live code

<TertiaryCTALink href="">See all options</TertiaryCTALink>

Destructive secondary

Use when the navigation leads to a page where a destructive or irreversible action will be performed, such as a dedicated cancellation or deletion confirmation page. The outlined red styling signals risk without triggering the action immediately.

Note: a filled destructive variant (filled red background) is not available on CTA Link. If you need a filled destructive style, the action belongs on that destination page as a CTA Button.

Edit live code

<DestructiveSecondaryCTALink href="">Cancel my green plan</DestructiveSecondaryCTALink>

Destructive tertiary

Use for low-emphasis destructive navigation, when the risk needs to be communicated but the action should not be visually dominant.

Edit live code

<DestructiveTertiaryCTALink href="">Remove saved address</DestructiveTertiaryCTALink>

Default chevron icon

CTA Link includes a chevron-right icon on the right by default. This indicates that the user will be taken somewhere, and there is more to see or do at the destination.

To suppress the chevron when the destination is already evident from context (for example, when the link label names the destination precisely and an icon would be redundant), pass iconRight="off" explicitly.

Edit live code

<PrimaryCTALink href="" iconRight="off">View account details</PrimaryCTALink>

Opens in new window

Set opensInNewWindow to true when the link must open in a new browser tab. This sets target="_blank", replaces the default chevron with a new-window icon, and adds visually hidden text reading " (opens in new window)" so screen reader users are informed before activating the link.

Do not set target="_blank" directly; use the opensInNewWindow prop so that all related behaviour stays consistent.

Edit live code

<PrimaryCTALink href="" opensInNewWindow>More facts about trees</PrimaryCTALink>

Using React Router

By default, CTA Link renders as an <a> element. To use React Router's Link component for client-side navigation in a single-page application, pass it via the forwardedAs prop. Don't use as for this: it would replace CTA Link itself with Link and lose its icons. All other props behave the same.

This example is not live, because the docs site does not use React Router.

import { Link } from 'react-router-dom';

<PrimaryCTALink forwardedAs={Link} to="/account">
  View account
</PrimaryCTALink>

Icons

An icon can be added to the left of the label with iconLeft. Use a left icon when it reinforces what the link leads to, for example a download icon before "Download statement".

Edit live code

<PrimaryCTALink href="" iconLeft="download">Download statement</PrimaryCTALink>

The right icon can be replaced with any icon name. Pass the icon name to iconRight to override the default chevron.

Edit live code

<PrimaryCTALink href="" iconRight="download">Download statement</PrimaryCTALink>

Small size

Use size="small" for compact contexts such as table rows or dense UI where the default link height would be too large.

Edit live code

<PrimaryCTALink href="" size="small">View account details</PrimaryCTALink>

Full width

The fullWidth prop controls how the link sizes to its container:

'small' (default): full width below the smallest breakpoint, auto width above
'always': full width at all breakpoints
'never': always auto width

Edit live code

<PrimaryCTALink href="" fullWidth="always">Plant a tree</PrimaryCTALink>

Content guidance

Labels must describe the destination or action. "Click here", "Find out more", and similar vague phrases must not be used. Screen reader users navigate by links alone and hear labels out of context, so a vague label provides no information about where the link goes.

Use sentence case: "View account details", not "View Account Details"
Start with a verb or noun that describes the destination: "View", "Download", "Go to", "See"
Each CTA Link on a page should have a unique label. If two links go to different places but have the same label, add visually hidden text to distinguish them
Avoid possessive pronouns: "View account details" rather than "View your account details"
When using opensInNewWindow, write labels that are still meaningful without the "(opens in new window)" suffix

Common patterns:

Context	Label
Viewing more detail	"View account details", "See full breakdown"
Continuing a journey	"Continue", "Next step"
External reference	"Energy price cap information", "Ofgem guidance"
Downloading a file	"Download statement", "Get invoice"