Back button
A link that takes users back to the previous page.
On this page
Preview
import { BackButton } from '@govtech-bb/react';
<BackButton href="/previous-page" />;<a class="govbb-link govbb-back-button" href="/service/previous-step/">Back</a>The back button is a link with the brand’s swept arrow that takes users back to
the previous page. It composes with the link component: use both classes,
govbb-link govbb-back-button, so the arrow follows the link’s colour on
hover, active and focus. Point href at the previous page in the journey so
the link works without JavaScript.
Usage
When to use
- Use a back button to return to the previous page in a linear, multi-page service.
- Use a more specific label, such as “Back to contact details”, when the destination may not be obvious.
When not to use
- Do not use a back button to represent the website hierarchy; use breadcrumbs.
- Do not show a back button and breadcrumbs on the same page.
Best practices
Return users to the page as they left it
The destination should be the previous service step, with entered answers and selections preserved. The service must also cope with users choosing their browser’s back button.
Keep the back button in a consistent place
Place it near the top of the page, before the page title and main task. Make it work without JavaScript wherever possible.
Not on form pages
A page with a form to submit pairs Back with Continue in a button group after the last field - Back as a secondary button, Continue as the primary one. Use this component on pages with nothing to submit: guidance, a confirmation, a signpost. See the single question page.