BackButton Tracking

Extends BackButton

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

Extends the generic BackButton by replacing the router link with SPTrackedRouterLink, enabling automatic click tracking. Also injects data-sp attributes into the label for Showpad config-driven labelling.

Getting started

<template>
    <div>
        <BackButton :to="{ name: 'overview' }" data-sp="nav.back" />
    </div>
</template>

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

API

This component extends from BackButton. All attributes will be passed on to that parent component unless documented here.

Properties

dataSp

The data-sp path used for config-driven label injection. When set, injects data-sp and data-sp-description into the label wrapper automatically.

Values: String

Default: null

dataSpDescription

Description used when generating the label's data-sp-description attribute.

Values: String

Default: 'Button'

dataSpRegion

Disabled

This prop is intentionally disabled — passing a value triggers a console warning and the value is ignored. Use dataSp instead.

Values: String

Default: null

Slots

No additional slots next to BackButton. All slots are forwarded transparently.