Back link

Use the back link component to help users go back to the previous page in a multi-page transaction.

See the GOV.UK Design System documentation on back links for more information on when to use this component.

<gv-back-link href="">Back</gv-back-link>

You can set up this component to use router-link or nuxt-link if needed. See Using router-link or nuxt-link for more details.

<script setup lang="ts">
import { NuxtLink } from '#components';

  <gv-back-link :component="NuxtLink" to="/example-page" />

Using a click event handler

You can attach a click event handler instead of setting href. Use @click.prevent to stop the browser from jumping to the top of the page.

<script setup lang="ts">
function handleClick() {
  alert('You clicked the back link')

  <gv-back-link @click.prevent="handleClick">Back</gv-back-link>

You can set the link text via the default slot or using the :text prop.

<script setup lang="ts">
import { ref } from 'vue'

let previousPageName = ref('dashboard')

function goBack() {
  previousPageName.value = (previousPageName.value === 'dashboard') ? 'case' : 'dashboard'

  <gv-back-link @click.prevent="goBack" :text="`Go back to ${previousPageName}`" />


text string
Text to use within the back link component. If content is provided in the default slot, this prop will be ignored.

Defaults to 'Back'.
href string
The value of the link's href attribute.

Defaults to '#'.
component string|object
The component used to render the link, for example RouterLink.

Defaults to 'a'.


The content of the back link. If content is provided in this slot, the text prop will be ignored.