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>

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.