Steps

Where the reader is in a sequence, and what is left. Horizontal, vertical, inline or as navigation, with a status per step.

Basic

Pass items and current to show progress through a sequence.

Color

Set color="primary" to paint the active and finished steps in the primary color instead of the neutral default.

Variant

Set variant="outlined" to draw the step circles and dots as rings instead of filled shapes.

Size

Set size="small" for smaller circles and tighter type in dense layouts.

Vertical

Set orientation="vertical" to stack the steps in a column, with each step's content under its title, with numbers, type="dot" or type="inline".

Dot

Set type="dot" to replace the numbered circles with small dots.
Set type="navigation" with onChange for tab-like steps the user can jump between, and disabled on a step they cannot reach yet.

Panel

Set type="panel" to give each step its own panel, like the stages of an onboarding flow, filled or with variant="outlined".

Inline

Set type="inline" for a compact row of dots, with each step's content shown in a tooltip on hover.

Inline offset

Set offset on an inline row that shows only the later steps, so its dots line up under the full pipeline above it.

Custom icons

Give an item its own icon to replace the number in its circle, like an upload glyph or a spinner on the step in progress.

Error status

Set status="error" on Steps to mark the current step as failed, with a red circle and a cross.

Status per item

Set status on one item to fail a step that is not the current one, like a validation that broke before publishing.

Percent

Pass percent to draw a progress ring around the current step, for a step whose progress you can measure, like an upload.

Title placement

Set titlePlacement="vertical" to put each title under its circle, which leaves more room for longer titles on a horizontal rail.

Clickable

Pass onChange to make each step clickable, sharing one current state with the Previous and Next buttons.

Max count

Set maxCount to collapse a long run of steps into an ellipsis around the current one, so only a few stay visible at once.

API Reference

Steps
Steps's props. Rows marked antuikit in the Version column are added by the kit.
StepItem
The fields of an entry in items.