Direction link

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

<Flex flexWrap="wrap" gap={2}>
	<DirectionLink href="#" direction="left">
		Back
	</DirectionLink>
	<DirectionLink href="#" direction="right">
		Next
	</DirectionLink>
	<DirectionLink href="#" direction="up">
		Top
	</DirectionLink>
	<DirectionLink href="#" direction="down">
		Skip to footer
	</DirectionLink>
</Flex>

Do

• use to link ‘up’ or ‘down’ within a page - for example, Back to top
• use to guide users ‘back’ to a parent page
• use to show ‘next’ or ‘previous’ pages.

Don’t

• use a link in place of a button.

Direction button

The DirectionLink component will render an HTML anchor tag. We strongly recommend using this wherever possible as it is the most inclusive and accessible solution for users.

But sometimes, using a link may be technically inappropriate for some experiences, as navigating to another web page would reset some application state, such as user-entered form information.

DirectionButton provides the appearance of a DirectionLink but the functionality of an HTML button element.

<Stack gap={2}>
	<DirectionButton onClick={() => goToPreviousStep()} direction="left">
		Back
	</DirectionButton>
	<DirectionButton onClick={() => goToNextStep()} direction="right">
		Next
	</DirectionButton>
</Stack>

When to use a direction link as a back button

A Back button can be used in place of Breadcrumbs when you want to keep a user in a flow or to maintain the parent child relationship between two pages. Multi-page forms and side-flows are examples of where to apply back buttons.

Back buttons should not be used on content pages as they do not show a user where they are in relation to the rest of a site structure. They allow a user to navigate up only one level whereas a breadcrumb allow navigation back through the entire site.

When using Back buttons always use the label ‘Back’ rather than the name of the parent page. The label ‘Back’ is universal, can be understood in any context and does not require the user to remember the name of the parent page.

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}>
	<Stack gap={1.5}>
		<H4>Directional links: on light background</H4>
		<Flex flexWrap="wrap" gap={2}>
			<DirectionLink direction="left" href="#">
				Back
			</DirectionLink>
			<DirectionLink direction="right" href="#">
				Next
			</DirectionLink>
			<DirectionLink direction="up" href="#">
				Top
			</DirectionLink>
			<DirectionLink direction="down" href="#">
				Skip to footer
			</DirectionLink>
		</Flex>
	</Stack>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Directional links: on dark background</H4>
		<Flex flexWrap="wrap" gap={2}>
			<DirectionLink direction="left" href="#">
				Back
			</DirectionLink>
			<DirectionLink direction="right" href="#">
				Next
			</DirectionLink>
			<DirectionLink direction="up" href="#">
				Top
			</DirectionLink>
			<DirectionLink direction="down" href="#">
				Skip to footer
			</DirectionLink>
		</Flex>
	</Stack>
</Box>

Related components

• Call to action – Call to action links are interactive UI cues that direct users to other pages.
• Text link – A typographic component for creating hyperlinks.