CTA Links direct users to a different page to complete an action.
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.
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.
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.
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 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".
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.
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.
We can use the theme to either override the default variants, or add to them.