Text link

import { ... } from '@ag.ds-next/react/text-link';

<Text>
	This is some text with <TextLink href="#">a link</TextLink> inside.
</Text>

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.

Do

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

Don’t

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

TextLinkExternal

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:

• G200: Opening new windows and tabs from a link only when necessary
• Opening Links in New Browser Windows and Tabs

<Text>
	Interact with our components in{' '}
	<TextLinkExternal href="https://design-system.agriculture.gov.au/playroom">
		Playroom
	</TextLinkExternal>
	.
</Text>

Related components

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