Stepper

Visualizes progress through a multi-step process. Each step has a label, optional description, and a type that drives the icon and color (not started, in progress, complete, error, etc.).

Set up accountCreate your profile

Configure settingsPick preferences

Invite teamOptional

DoneAll set

<Stepper>
  <StepperItem label="Set up account" type="complete" />
  <StepperItem label="Configure settings" type="in-progress" active />
  <StepperItem label="Invite team" type="not-started" />
  <StepperItem label="Done" type="not-started" />
</Stepper>

Aurora ships two pieces:

• Stepper — the container; sets orientation and linear/non-linear layout
• StepperItem — each step; renders an icon based on type and an optional connector line to the next step

When to reach for a Stepper

Type	Use it when…
Linear (default)	The flow is a wizard or onboarding — earlier steps unlock later ones. Multi-step forms (3–7 steps), data import / export with discrete sequential stages. Any workflow where seeing overall progress reduces user anxiety.
Non-linear (:linear="false")	Tasks can be completed in any order — ESG data categories, parallel workstreams, review / approval workflows, checklists. The two review-* types only make sense in this mode.

When not to use a Stepper

• Single-step forms — no navigation context to communicate
• Percentage-based progress (uploads, processing) — use LoadingBar
• More than ~7 steps horizontal — go vertical, or break the flow into phases
• Showing a non-linear flow as linear — it falsely implies order matters; users will try to follow the line

Vertical

SubmittedForm was sent

Under reviewReviewing your data

ApprovalPending sign-off

PublishedVisible to others

<Stepper orientation="vertical">
  <StepperItem label="Submitted" type="complete" />
  <StepperItem label="Under review" type="review-in-progress" active />
  <StepperItem label="Approval" type="review-not-started" />
  <StepperItem label="Published" type="not-started" />
</Stepper>

Linear vs non-linear

The default linear layout draws a continuous connector line between steps — appropriate for sequential processes where order matters (multi-step forms, onboarding wizards).

Pass :linear="false" for independent steps with no implied ordering (e.g. a checklist of optional configuration steps).

Add API key

Configure webhook

Test integration

<Stepper :linear="false">
  <StepperItem label="Add API key" type="complete" />
  <StepperItem label="Configure webhook" type="not-started" />
  <StepperItem label="Test integration" type="not-started" />
</Stepper>

Step types

The type prop drives the step's icon and color treatment:

Not started

In progress

Complete

Error

Disabled

Value	Use for
not-started	Step not yet reached
in-progress	Step currently being worked on (often paired with active)
complete	Step finished successfully
error	Step failed validation or processing
disabled	Step skipped or not available
review-not-started	Reviewer-flow specific: awaiting review
review-in-progress	Reviewer-flow specific: review underway

Clickable steps

Set clickable on a StepperItem to render it as an interactive button. Useful when users can navigate back to previous steps.

<StepperItem label="Account" type="complete" clickable @click="goToAccountStep" />

Stepper — Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction.
linear	boolean	true	Draw a continuous connector line between steps. Set false for independent / unordered steps.

StepperItem — Props

Prop	Type	Default	Description
label	string	required	Bold step name.
description	string	—	Secondary text under the label.
type	'not-started' | 'in-progress' | 'complete' | 'disabled' | 'error' | 'review-not-started' | 'review-in-progress'	—	Drives icon and color.
active	boolean	false	Mark this step as the current focus. Style highlights it.
clickable	boolean	false	Render as a clickable button.
class	string	—	Additional classes.