Call to action

import { ... } from '@ag.ds-next/react/call-to-action';

<CallToActionLink href="#">Sign up</CallToActionLink>

A simple and clear link to direct users to a preferred action.

Do

• use verbs such as Get help or Learn more
• ensure the label indicates where the user is going.

Don’t

• use inconsistent labels – define the wording for each action and employ across the service
• write more than 3-4 words per call to action
• let text run over two lines
• use for actions such as submitting a form or indicating a changing state
• use a call to action button if a user needs to go to another page – use a link.

Button

For situations where you need the appearance of a CallToActionLink but the functionality of an HTML button element, you can use the CallToActionButton component.

<CallToActionButton onClick={console.log}>Sign up</CallToActionButton>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<CallToActionButton onClick={console.log}>
		CTA: on light background
	</CallToActionButton>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<CallToActionButton onClick={console.log}>
		CTA: on dark background
	</CallToActionButton>
</Box>

Related components

• Direction link – Direction links are links which communicate flow to other parts of a page or process.
• Text link – A typographic component for creating hyperlinks.