Skip to main content

Stepper

Stepper renders an ordered lifecycle as a horizontal flow — completed steps show a check, the active step pulses, and upcoming steps are muted, with an animated progress track between them.

When to use​

  • Show progress through an ordinal sequence (Draft → Submitted → Approved → Completed).
  • Wizard/lifecycle indicators where steps are numbered stages, not dates.

Reach for Timeline instead when steps are dated events rather than a fixed ordinal flow.

Import​

import { Stepper } from '@spartanfx/react';

Basic usage​

steps is an array of { stepName, tooltip? }, and currentStep names the active one.

<Stepper
  steps={[
    { stepName: 'Draft' },
    { stepName: 'Submitted' },
    { stepName: 'Approved' },
    { stepName: 'Completed' },
  ]}
  currentStep="Approved"
/>

Tooltips and clicks​

<Stepper
  steps={[
    { stepName: 'Draft', tooltip: 'Not yet submitted' },
    { stepName: 'Submitted', tooltip: 'Awaiting review' },
    { stepName: 'Approved', tooltip: 'Signed off' },
  ]}
  currentStep="Submitted"
  onStepClick={(stepName) => goToStage(stepName)}
  classNames={{ root: 'flow-root', status: 'current-status' }}
/>

Key props​

PropTypeNotes
steps (required){ stepName: string; tooltip?: string }[]Ordered lifecycle stages.
currentStep (required)stringThe active step's stepName.
onStepClick(stepName: string) => voidFires when a step is clicked.
classNames{ root?; status? }Class overrides for the container and active step.

See the full generated reference: Stepper API ↗.

See also​