Stepper

Visual step progress indicator for multi-step workflows.

Preview · Stepper

Code

HTML · @primus/ui-core
React
Angular

<div class="vstack" style="max-width:400px;width:100%">
  <progress value="50" max="100"></progress>
  <div style="display:flex;justify-content:space-between;font-size:0.75rem;color:var(--muted-foreground)">
    <span>Step 2 of 4</span><span>50% complete</span>
  </div>
  <div style="display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;font-size:0.775rem">
    <div style="flex:1;padding:0.45rem;text-align:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border-right:1px solid var(--border)">✓ Details</div>
    <div style="flex:1;padding:0.45rem;text-align:center;background:var(--primary);color:var(--primary-foreground);border-right:1px solid var(--border)">Review</div>
    <div style="flex:1;padding:0.45rem;text-align:center;color:var(--muted-foreground)">Submit</div>
  </div>
</div>

import { PrimusStepper } from 'primus-react-ui';

<PrimusStepper steps={['Details', 'Review', 'Submit']}
  activeStep={1} completedSteps={[0]}
  onStepSelected={(idx) => setStep(idx)} />

<primus-stepper [steps]="steps" [activeStep]="activeStep"
  [completedSteps]="completedSteps" (stepSelected)="onStep($event)">
</primus-stepper>

Props

Prop	Type	Default	Description
`steps`	`string[]`	required	Step labels
`activeStep`	`number`	`0`	Current step
`completedSteps`	`number[]`	`[]`	Completed indices

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props