Direction link

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

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

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.