StepperItem
One step in a stepper — an avatar marker plus the step name, keyed to its role in the sequence.
Usage
import { StepperItem } from '@acronis-platform/ui-react';StepperItem is a single step: the marker you pass as avatar, followed by the
step name. variant says where the step sits in the sequence — current (where
the user is), completed (already passed), future (not reachable yet) — and
drives the container fill, border, and the label color. state is the
interaction look, and it only changes anything on a completed step: current
is always highlighted with a border and future is always disabled, which is
exactly the six variant/state combinations the Figma component set draws.
Only current paints a visible border, but every variant reserves the same
border box, so all three measure the same and a row of steps keeps its markers
and names aligned.
The marker is a required slot you own completely. Pass any Avatar
composition — color scheme, initials, an icon, an image, size overrides — and the
step renders it verbatim without sizing, tinting, or recoloring it.
Figma recolors the digit inside a current/future step's avatar to that
step's own label-color token, overriding Avatar's usual per-scheme color.
Since the step never touches the marker, pass that override yourself —
<Avatar className="text-[var(--ui-stepper-item-current-label-color)]" …>
(or -future-label-color) — as the examples below do. completed uses a
fixed checkmark icon, so it needs no such override.
Avatar always paints a 2px outset ring meant to separate overlapping avatars
in an AvatarGroup. Figma's StepperItem avatars carry no such stroke, so
left on, the ring shows as an unwanted halo on current's blue fill and on
completed's hover/active fills. Switch it off yourself with
className="[box-shadow:none]" on the composed Avatar, as the examples
below do.
Compose the steps inside Stepper, which lays them out in
a row and adds the compact narrow-viewport summary — don't hand-roll that row. You
still decide each step's variant. The step is polymorphic via Base UI's
useRender (the render prop) — a completed step is usually a real <button>
that jumps back, and it then gets the library's standard 3px focus ring.
As of the 2026-08-24 Figma sync, this component consumes a dedicated
--ui-stepper-item-* token tier from @acronis-platform/tokens-pd — every
variant's container fill, the current step's border, all four completed
interaction states, and the three per-variant label colors are Stepper-owned
tokens rather than borrowed from the semantic scale. completed/idle and
future resolve to transparent in the shipped brands, but they are wired to
their own tokens, so a brand that gives either one a fill is honored.
Examples
A full sequence:
<Stepper
currentStep={2}
totalSteps={3}
current="Choose a plan"
next="Confirm and pay"
>
<StepperItem
render={<button type="button" onClick={() => goToStep(1)} />}
variant="completed"
label="Create an account"
avatar={
<Avatar color="green" className="[box-shadow:none]">
<CheckIcon size={16} />
</Avatar>
}
/>
<StepperItem
variant="current"
label="Choose a plan"
avatar={
<Avatar
color="blue"
className="[box-shadow:none] text-[var(--ui-stepper-item-current-label-color)]"
>
<AvatarFallback>2</AvatarFallback>
</Avatar>
}
/>
<StepperItem
variant="future"
label="Confirm and pay"
avatar={
<Avatar
color="gray"
className="[box-shadow:none] text-[var(--ui-stepper-item-future-label-color)]"
>
<AvatarFallback>3</AvatarFallback>
</Avatar>
}
/>
</Stepper>Force a completed step's interaction look — useful when a parent owns hover and press detection:
<StepperItem
variant="completed"
state="hover"
label="Create an account"
avatar={
<Avatar color="green" className="[box-shadow:none]">
<CheckIcon size={16} />
</Avatar>
}
/>state="focus" renders the same 3px ring a real <button> gets automatically
via render — useful to force the look without focusing the element:
<StepperItem
variant="completed"
state="focus"
label="Create an account"
avatar={
<Avatar color="green" className="[box-shadow:none]">
<CheckIcon size={16} />
</Avatar>
}
/>A future step stays in the reading order but is not reachable: it is marked
aria-disabled, takes no pointer events, and is dropped from the tab order
(tabindex="-1"), so it cannot be clicked or tabbed to and activated with
Enter/Space. On the default <div> it also carries role="link" — without a
widget role, aria-disabled is not announced at all. It is not the native
disabled attribute, though, so a programmatic .click() on a composed control
still fires; skip future steps in your own navigation logic too.
<StepperItem
variant="future"
label="Confirm and pay"
avatar={
<Avatar
color="gray"
className="[box-shadow:none] text-[var(--ui-stepper-item-future-label-color)]"
>
<AvatarFallback>3</AvatarFallback>
</Avatar>
}
/>API Reference
Prop
Type