Import

1import { StepIndicator } from "packages/ui/src";

Props

StepIndicatorProps

Prop	Type	Required
`steps`	`Step[]`	Yes
`currentStep`	`number`	Yes

Examples

Step Indicator

Multi-step progress indicator with numbered circles, checkmarks, and labels.

Interactive

All Completed

First Step

Metadata

Component Metadata

Familynavigation

FrameworksNext.js, Astro/EmDash

DescriptionMulti-step progress indicator with numbered circles, connector lines, completed checkmarks, active highlight, and step labels. Token-driven for all visual states.

PropsStepIndicatorProps (steps: Step[], currentStep: number)

Statesall-pending, mid-progress, all-completed, first-step, last-step

A11y

Container has role=navigation with aria-label
Uses ordered list (ol)
Active step has aria-current=step
Checkmark icon is aria-hidden

Responsive

Full-width flex layout
Steps share equal space

Motion

No animation by default

Token Dependencies

components.stepIndicator.circleSize
components.stepIndicator.circleBorder
components.stepIndicator.circleBackground
components.stepIndicator.circleColor
components.stepIndicator.activeBackground
components.stepIndicator.activeBorder
components.stepIndicator.activeColor
components.stepIndicator.completedBackground
components.stepIndicator.completedBorder
components.stepIndicator.completedColor
components.stepIndicator.lineColor
components.stepIndicator.lineActiveColor
components.stepIndicator.lineHeight
components.stepIndicator.labelColor
components.stepIndicator.labelActiveColor
components.stepIndicator.labelFontSize
components.stepIndicator.fontSize

Content Slotssteps (Step[]), labels (string[])

CMS Bindings

Step labels from CMS workflow
Current step from app state

Test Cases

Renders all steps
Has role=navigation
Active step has aria-current
Completed steps show checkmark
Active step has active class
Shows step labels
Shows step numbers for pending
Passes className through