Back link

Standard

Default

Use the default back link to help users go back to the previous page.

Show code

<a class="govuk-back-link" href="#">Back</a>

---
import { BackLink } from "@i-dot-ai-npm/component-library-astro";
---

<BackLink href="#">Back</BackLink>

import { BackLink } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <BackLink href="#">Back</BackLink>
  );
}

<script>
  import { BackLink } from "@i-dot-ai-npm/component-library-svelte";
</script>

<BackLink href="#">Back</BackLink>

import { BackLink } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <BackLink href="#">Back</BackLink>
  );
}

Inverse

Use the inverse back link on dark backgrounds.

Show code

<a class="govuk-back-link govuk-back-link--inverse" href="#">Back</a>

---
import { BackLink } from "@i-dot-ai-npm/component-library-astro";
---

<BackLink href="#" inverse>Back</BackLink>

import { BackLink } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <BackLink href="#" inverse>Back</BackLink>
  );
}

<script>
  import { BackLink } from "@i-dot-ai-npm/component-library-svelte";
</script>

<BackLink href="#" inverse>Back</BackLink>

import { BackLink } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <BackLink href="#" inverse>Back</BackLink>
  );
}

When to use this component

Always include the Back link component on GOV.UK Question pages in your service.

You can include a back link on other pages within a multi-page transaction, if it makes sense to do so.

When not to use this component

Never use the back link component together with the Breadcrumbs component. If necessary, you should do research with your users to learn which they find more helpful in your service.