Ontario.ca homepage
Français

Ontario Design System

Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Back button

Use the back button to help users go back to the previous page in a multi-page form or application.

  • Content: 
    @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;

$ontario-icon-size: 24px;

/**
* Tertiary button defaults are overridden to achieve the mini-button specifications
* width is unset in small screen size to remove unnecessary space being added to the button
* min-width and max-width are set for small screen size to ensure the "back" button doesn't break and protrude into the text to the right
*/

.ontario-back-button {
	display: flex;
	align-items: center;
	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-4;
	padding-left: spacing.$spacing-2;
	padding-right: spacing.$spacing-4;
	min-width: spacing.$spacing-8;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: unset;
	}

	.ontario-icon {
		margin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;
		padding: spacing.$spacing-0;
		min-width: $ontario-icon-size;
		min-height: $ontario-icon-size;
	}
}
  • URL: /components/raw/back-button/back-button.scss
  • Filesystem Path: fractal/components/components/navigation/back-button/back-button.scss
  • Size: 1.1 KB
  • Content: 
    .ontario-back-button{display:flex;align-items:center;margin:.75rem 0 1rem;padding-left:.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-back-button{width:unset}}.ontario-back-button .ontario-icon{margin:0 .375rem 0 0;padding:0;min-width:24px;min-height:24px}
  • URL: /components/raw/back-button/back-button.css
  • Filesystem Path: fractal/components/components/navigation/back-button/back-button.css
  • Size: 294 Bytes

Guiding principle: Start simple.

When to use this component

Use the back button to return the previous page on multi-step forms or applications.

For longer forms where you need to show progress or steps, use the step indicator component which has the back button built in.

When not to use this component

We do not recommend using the back button on pages that have more than one entry point.

If a user can arrive at the page through different paths, do not use a back button since you will not know where they came from.

For example, a user could arrive from a search engine or an external landing page. They might think the back button takes them back to the search engine.

Consider using breadcrumbs in these cases. Do not use both breadcrumbs and back buttons together. If necessary, do research with your users to learn which one they find more helpful in your service.

Best practices

Do

  • On transactions or forms, place the back button at the top of a page after the header component.

Do this

Illustration of a web form with a back button placed above the other form elements.

Don't do this

Illustration of a web form with a back button placed next to the primary button.
  • Ensure the back button takes users to the previous page they were on, in the state they last saw it.
  • Consider using different button text on complex user journeys, such as “Go back to [specific page title]” so it’s clear to users what they are going back to.

Don’t

  • Use the back button on pages or forms that have more than one entry point.
  • Use the back button together with breadcrumbs.
  • Create unexpected behaviours to the user’s flow when they interact with the back button.

Technical specifications

There are multiple ways to code the back button. The solution will depend on your application’s flow:

  • a JavaScript back-link (for example, using <window.history.back();>) to call the previous page in the browser’s history
  • the History API functions (helpful for single-page applications)
  • a specific URL that represents the previous state of the user experience in the application

Unexpected behaviours

When deciding how to code the back button, consider how unexpected behaviours may interrupt the user’s flow.

Previous state on the same page

If the user interacts with an element on the page that changes the browser history (such as tabs or in-page links), the back button should bring the user to the previous page, not a previous state on the same page.

Unexpected exit out of the service

The back button should take the user to the previous point in the service, not out of the service.

If you have any questions or feedback, please get in touch.