Back Link

Use the back link component to help users go back to the previous page in a multi-page transaction or journey.

Default Back Link

The back link includes a left-pointing arrow to indicate backward navigation.

<a href="/previous-page" class="back-link">Back</a>

Back Link with Custom Text

You can customise the text to be more specific about the destination.

<a href="/overview" class="back-link">Back to application overview</a>

Placement

Always place the back link at the top of the page, before the main heading. This follows the reading order and helps users understand where they are.

<a href="/previous" class="back-link">Back</a>
<h2>Enter your details</h2>
<p>Please fill in the form below.</p>

When to Use

Use a back link when:

• Users are in a multi-step process or transaction
• Users need to return to correct information
• The browser back button may not work correctly (e.g., after form submission)

Don't use a back link when:

• On the first page of a service (there's nowhere to go back to)
• Users should not go back (e.g., after payment)
• The browser back button works correctly

Usage Guidelines

Do

• Place at the top of the page, before the page heading
• Link to the actual previous page in the journey
• Use "Back" as the default text
• Make sure it works with JavaScript disabled

Don't

• Don't use JavaScript history.back() as the only implementation
• Don't use on content pages outside of transactions
• Don't style it as a button

Accessibility

• Uses a standard anchor element for keyboard accessibility
• Focus state follows design system patterns
• The arrow is decorative and hidden from screen readers

CSS Classes

.back-link { }