BackButton

import { BackButton } from '@bbc/front-end-kit/vue'

A structured way to provide a backbutton component across projects with built in routing and using vue components.

Getting started

<template>
    <div>
        <BackButton :to="{ name: 'overview' }" label="Go back" />        
    </div>
</template>

<script setup>
import { BackButton } from '@bbc/front-end-kit/vue'
</script>

Guidelines

Always extend or wrap the component, provide it with default values, and ensure consistency across the project.

API

Properties

Icon

The icon to show. Can be any valid Vue component. When null, no icon is rendered.

Values: Vue Component

Default: null

iconProps

Object with attribute contents that need to be applied to the provided icon element.

Values: Object

Default: {}

label

The label to render next to the icon

Values: String

Default: 'Back'

labelProps

Object with attribute contents that need to be applied to the label wrapper of the button.

Values: Object

Default: {}

to

Url/path string or route object to route to when clicked.

Values: 'url' | Named Route Object

Default: '/'

RouterLink

RouterLink instance to override the one used by this component.

Some projects may extend RouterLink to add project specific logic (like tracking). Pass the custom RouterLink component using this attribute so the BackButton instance is consistent with the rest of the project.

Values: RouterLink

Default: RouterLink

Slots

default

Replaces the text inside the label wrapper. Receives the current route and label as slot scope.

Properties

to: The route to link to in the Vue app.
label: The label to render next to the icon