Johnson & Johnson
Technology Services
PN

Progress stepper

Multi-step process tracker. Aligned with J&J DS v1.2 (Figma 22369:100444). Two variants: default (line + dots) and contained (filled segments).

Default — line + dots

  1. Details
  2. Verify
  3. 3
    ScheduleChoose a slot
  4. 4
    Consent
  5. 5
    Review
Show source
<ProgressStepper steps={[
  { id: "a", label: "Details", status: "completed" },
  { id: "b", label: "Verify", status: "completed" },
  { id: "c", label: "Schedule", status: "current", description: "Choose a slot" },
  { id: "d", label: "Consent", status: "upcoming" },
  { id: "e", label: "Review", status: "upcoming" },
]} />

Contained variant

Filled segments instead of dots — better for compact layouts.

  1. Intake
  2. 2
    Triage
  3. 3
    Diagnosis
  4. 4
    Treatment
Show source
<ProgressStepper variant="contained" steps={[…]} />

All-completed

Visualize a finished workflow.

  1. Intake
  2. Triage
  3. Diagnosis
  4. Treatment
Show source
<ProgressStepper steps={steps.map((s) => ({ ...s, status: "completed" }))} />