Agriculture Design System
Design System for the Export Service

Text link

A typographic component for creating hyperlinks.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/text-link';
Open in Playroom, opens in a new tab
	This is some text with <TextLink href="#">a link</TextLink> inside.

This package includes the components <TextLink /> and <TextLinkExternal />.

The TextLink component creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.


  • use TextLinkExternal if the link takes the user away from an active flow (such as a form)
  • use to link users to other pages
  • provide a concise label that describes the target destination – for example, Export Service home.


  • use TextLinkExternal unless the use case is valid
  • use to trigger an action – use a Button instead
  • use generic labels such as Click here
  • remove styles for action, colour and underline.


For the most part, always open links in the same browser tab or window. There is generally only one reason to open a page in a new tab/window, which is when the user will need to refer to that content in order to complete a task in another window.

In those situations, the TextLinkExternal component can be used to create a link that opens in a new tab and includes descriptive text to communicate the interaction to a screen reader user.

For more information, please refer to:

	Interact with our components in{' '}
	<TextLinkExternal href="">
  • Call to action Call to action links are interactive UI cues that direct users to other pages.
  • Direction link Direction links are links which communicate flow to other parts of a page or process.
  • Text A primitive typographic component for constrained text styles.