Flux

Tracker entry ​

A milestone on the rail of a Tracker: a marker, a header carrying the title, a badge and the moment, and a body holding whatever the milestone needs.

Shipment 1
In Progress
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam earum facilis fugiat in.
Jane Cooperleft a note
Mar 10, 2026 · 10:42 am
Order created
Mar 8, 2026 · 09:12 am

TIP

The marker follows the color of the milestone; leave icon out and the entry falls back to a small dot, for a row that merely happened.

INFO

The entry exposes the ARIA listitem role.

Props

title?: string
The title of the entry.

description?: string
A secondary line shown next to the title, for example what happened.

when?: string
The moment the entry describes, shown under the title.

icon?: FluxIconName
The icon of the marker on the rail. Without one the entry gets a small dot instead.

color?: FluxColor
The color of the marker.
Default: gray

Slots

start
Shown before the title, for example a FluxAvatar of the person the entry is about.

end
Shown after the title, for example a FluxBadge carrying the state of the entry.

default
The body of the entry. Place any Flux component here, for example a FluxDescriptionList or a group of steps.

Examples ​

Start and end

The header carries whatever you put in it; an avatar in front of the title, a badge behind it.

left a note
Mar 10, 2026 · 10:42 am
Shipment 1
2 parcels
Mar 10, 2026 · 11:08 am

<template>
    <FluxStatisticsTracker style="width: 100%; max-width: 450px">
        <FluxStatisticsTrackerEntry
            icon="message"
            description="left a note"
            when="Mar 10, 2026 · 10:42 am">
            <template #start>
                <FluxAvatar
                    fallback-initials="JC"
                    :size="24"/>
            </template>
        </FluxStatisticsTrackerEntry>

        <FluxStatisticsTrackerEntry
            color="primary"
            icon="truck"
            title="Shipment 1"
            when="Mar 10, 2026 · 11:08 am">
            <template #end>
                <FluxBadge
                    colored
                    color="primary"
                    icon="box"
                    label="2 parcels"/>
            </template>
        </FluxStatisticsTrackerEntry>
    </FluxStatisticsTracker>
</template>

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

Colors

The marker and the badge follow the state of the milestone.

Payment received
Paid
Awaiting stock
On hold
Address could not be verified
Action needed

<template>
    <FluxStatisticsTracker style="width: 100%; max-width: 450px">
        <FluxStatisticsTrackerEntry
            color="success"
            icon="circle-check"
            title="Payment received">
            <template #end>
                <FluxBadge
                    colored
                    color="success"
                    label="Paid"/>
            </template>
        </FluxStatisticsTrackerEntry>

        <FluxStatisticsTrackerEntry
            color="warning"
            icon="hourglass-clock"
            title="Awaiting stock">
            <template #end>
                <FluxBadge
                    colored
                    color="warning"
                    label="On hold"/>
            </template>
        </FluxStatisticsTrackerEntry>

        <FluxStatisticsTrackerEntry
            color="danger"
            icon="circle-exclamation"
            title="Address could not be verified">
            <template #end>
                <FluxBadge
                    colored
                    color="danger"
                    label="Action needed"/>
            </template>
        </FluxStatisticsTrackerEntry>
    </FluxStatisticsTracker>
</template>

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

Used components ​