ba-link-back
This component allows a user to choose to go back to a previous point or page
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 it's 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 "FAQ's" to reinforce the destination rather than the action
If the page is not the first page the user has viewed following and 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 browsers back button; the presence of a custom back 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 were they were previously will reduce the stress associated with entering and re-entering data.
Examples:
- if the user was entering data in to 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:
| Element | State | Key | Behaviour |
|---|---|---|---|
<ba-link-back> |
Previous element in DOM has focus | Tab |
<a> gets focus |
<a> |
<a> has focus |
Tab |
Next tabbable element in the DOM gets focus |
<a> |
<a> has focus |
Enter |
Browser navigates to url in href attribute |
| Element | State | Action | Behaviour |
|---|---|---|---|
<a> |
- | Click or Tap |
Browser navigates to url in href attribute |
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href
(required)
|
href |
Url to link to | string |
undefined |
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> |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Permitted ARIA roles
- None
Parent components
ba-link-back can be slotted into:
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>
document.querySelector('ba-link-back').addEventListener('baClick', (event) => {
event.detail.preventDefault();
// Now apply custom SPA routing...
});