Flux

Tracker label ​

A phase marker on the rail of a Tracker. It groups the entries that follow it, without taking the visual weight of an Entry.

Completed
Order placed
Mar 8, 2026 · 09:12 am
In-progress
Shipment 1
In Progress

TIP

Keep labels short. They name a phase, such as Completed or In-progress, and are rendered in uppercase.

INFO

The label exposes the ARIA listitem role.

Props

label: string
The text of the label.

color?: FluxColor
The color of the dot on the rail.
Default: gray

Slots

end
Shown after the label, for example a FluxBadge counting what the phase holds.

Snippet ​

vue
<template>
    <Preview>
        <FluxStatisticsTracker style="width: 100%; max-width: 450px">
            <FluxStatisticsTrackerLabel label="Completed"/>

            <FluxStatisticsTrackerEntry
                color="success"
                icon="circle-check"
                title="Order placed"
                when="Mar 8, 2026 · 09:12 am"/>

            <FluxStatisticsTrackerLabel
                color="primary"
                label="In-progress"/>

            <FluxStatisticsTrackerEntry
                color="primary"
                icon="truck"
                title="Shipment 1">
                <template #end>
                    <FluxBadge
                        colored
                        color="primary"
                        label="In Progress"/>
                </template>
            </FluxStatisticsTrackerEntry>
        </FluxStatisticsTracker>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxBadge } from '@flux-ui/components';
    import { FluxStatisticsTracker, FluxStatisticsTrackerEntry, FluxStatisticsTrackerLabel } from '@flux-ui/statistics';
</script>