ba-link-back
This component allows a user to choose to go back to a previous point or page
Airframe
Web Components
React
React Native
Anatomy
Back link
A clear and accessible text link that helps users navigate back to a previous or parent page, with a leading arrow icon to reinforce the direction of navigation
Design Documentation
Having multiple back links can confuse users about which one they should use, especially if they point to different destinations. A single, clearly defined back link ensures a consistent and predictable navigation experience, reducing cognitive load and preventing accidental navigation errors
Placing at the top of a page is best as:
- It's in a similar position to the browser back button which will help users understand its purpose
- A user will usually need the back link when landing on an incorrect page or if the user wants to modify data entered on the previous page
- It reduces clutter at the bottom of forms and should help users progress quicker through the journey
- It's a common pattern that users will be familiar with
Further reading:
Back links should align with the user's journey, making it easy for them to return to the last step they were on. If the back link takes them somewhere unexpected (e.g., a parent category instead of the exact previous page), it can break the expected flow and cause frustration. This is particularly important in multi-step processes, wizards, or form flows where users need to review or edit information.
Further reading:
Generic labels like "Back" can be ambiguous, especially when users might not remember what the previous page was. Providing context, such as "Cart" or "Account Settings," helps users make informed decisions about navigation
Phrasing like "Back to [Page]" can be redundant or misleading, as it might suggest a rigid navigation path rather than a flexible return option. Instead, use clearer alternatives like "My Account" or "FAQs" to reinforce the destination rather than the action
Live Demo
<ba-link-back href="/url">Previous page</ba-link-back>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href(required) |
href |
Url to link to | string |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Parent components
ba-link-back can be slotted into:
Events
| Event | Description | Type |
|---|---|---|
baClick |
Emitted when the internal link is clicked. For use with single-page app (SPA) routing so that link clicks can be handled to avoid a full page load. | CustomEvent<MouseEvent> |
Usage
Basic usage
<ba-content>
<ba-link-back href="url/to/previous/page">Previous page</ba-link-back>
<h1>Page heading</h1>
</ba-content>Usage in a single page application
<ba-content>
<ba-link-back href="url/to/previous/page">Previous page</ba-link-back>
<h1>Page heading</h1>
</ba-content>
<script>
document.querySelector('ba-link-back').addEventListener('baClick', (event) => {
event.detail.preventDefault();
// Now apply custom SPA routing...
});
</script>Guidelines
If the page is not the first page the user has viewed following an external link (eg. Google or from an Email), then clicking ba-link-back or the browser back button must go back to the same place in your application. This can be achieved by updating the URL to take the user to a previous page/state. Users have an expectation that a back link will behave in a predictable way; differences between the browser back button and the ba-link-back could confuse or disorientate users
As some users have anxiety about what will happen when they use the browser's back button; the presence of a custom back link should give the user more confidence when using our applications.
Further reading:
For those with anxiety, memory challenges, and difficulty following directions, the ability to go back and review information they have entered is very important.
Returning the user back to exactly where they were previously will reduce the stress associated with entering and re-entering data.
Examples:
- if the user was entering data into a form that is halfway down the previous page - return the user to the form not the top of the page
- if the user was part way through a video return the user back to their position in the video
Further reading:
Disabled link elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Keyboard navigation
State: Previous element in DOM has focus
<a> gets focus
State: <a> has focus
Browser navigates to URL in href attribute
Next tabbable element in the DOM gets focus
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-link-back has only been used once on a page
- ba-link-back is positioned at the top of the page, above the h1
- ba-link-back is only used for navigation and not for button-like actions such as submitting forms, launching modals, or opening menus
- ba-link-back has not been used to go back to an external site
- Link text is clear, descriptive, and communicates the destination and does not include the word "back"
Accessibility checklist
- ba-link-back has discernible text
- ba-link-back has not been disabled
- Browser URL is updated when navigating using ba-link-back
- Focus indicator has not been obscured on all sides of the component
- ba-link-back is not nested inside other interactive elements (e.g., buttons, other links, or form controls)
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-link-back is operable using assistive technology
- Has a visible focus indicator on all sides of the link
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments