Steps

A progress indicator for multi-step flows. Supports circles, bullets, and progress-bar variants. Each step has complete, current, or upcoming status.

Atom

Progress

When To Use

Use Steps when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
Do not rely on icon-only navigation unless every control has a clear accessible name.

Key Props / API

Props

steps, variant, className

Example Code

import { Steps } from "@hilum/ui"
import type { Step } from "@hilum/ui"

const steps: Step[] = [
  { name: "Details", status: "complete" },
  { name: "Review", status: "complete" },
  { name: "Confirm", status: "current" },
  { name: "Payment", status: "upcoming" },
  { name: "Done", status: "upcoming" },
]

<Steps steps={steps} variant="circles" />

Steps · Circles

Circles

Circle indicators with connector lines

Steps · Bullets

Bullets

Minimal dots with step counter

Steps · Progress bar

Progress bar

Horizontal fill bar with step labels

Details

Review

Confirm

Payment

Done

Steps · With descriptions

Circles with descriptions

Each step has a sub-label