Components Stepper dots

Stepper dots

A compact stage stepper — a row of dots joined by connectors. Completed stages are filled, the current stage is ringed and softly pulsing, upcoming stages are outlined. Used in the transaction sidebar (“3 of 11”) and on each transaction/quote list row, where the full koala-stepper-chain would be too heavy.

<koala-stepper-dots>

Canonical

<koala-stepper-dots total="11" current="3" />

Eleven-stage milestone set on stage 3. Dots before the current one are filled plum; the current dot is a ringed, gently pulsing outline; the rest stay muted. current is the 1-based index of the in-progress stage.

Tones

3 surfaces

Plum — on a light card (default)

OnPrimary — on a coloured / dark hero band

OnTint — on a light primary-container tint

@* On a light card (default) *@
<koala-stepper-dots total="6" current="3" tone="Plum" />

@* On a coloured / dark hero band *@
<koala-stepper-dots total="6" current="3" tone="OnPrimary" />

@* On a light primary-container tint *@
<koala-stepper-dots total="6" current="3" tone="OnTint" />

The tone recolours the dots for the surface they sit on. Pick the one that matches the container — never override the colours by hand.

Progress positions

start → complete

Just started (1 of 6)

Mid-way (4 of 6)

Last stage (6 of 6)

Complete (pass current > total)

For a fully complete set, pass any current past the end (e.g. total + 1) so every dot reads as done with no pulsing ring.

Props

3 attributes

Attribute	Values	Notes
total	int	Required. Number of stages (dots). Nothing renders when < 1.
current	int	1-based index of the in-progress stage; dots before it read as done. Clamped to range — pass `total + 1` for a complete set.
tone	Plum, OnPrimary, OnTint	Defaults to `Plum`. Recolours for the surface: `Plum` on a light card, `OnPrimary` on a dark/coloured hero, `OnTint` on the light primary-container tint.

A static BuildHtml(total, current, tone, extraClasses) exists for other tag helpers that embed the stepper in their own markup (e.g. the list-card milestone cell).

@* Embed inside another helper's HTML (e.g. a list-card cell) *@
@Html.Raw(KoalaStepperDotsTagHelper.BuildHtml(total: 11, current: 3))

Do & don't

Do Use the dots for at-a-glance progress in tight spaces — list rows, the sidebar header. Pair it with a “3 of 11” caption.

Don't Don't use the dots when there's room for the full story. On the detail page itself, reach for koala-stepper-chain so each stage gets its name, description and events.