Agriculture Design System
Design System for the Export Service

Call to action

Call to action links are interactive UI cues that direct users to other pages.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/call-to-action';
Open in Playroom, opens in a new tab
<CallToActionLink href="#">Sign up</CallToActionLink>

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


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


  • 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.


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>
  • 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.