Steps
Steps shows where a process stands as an ordered list of numbered Steps. Steps before current are finished, the ones after it are waiting, and the current step is marked with aria-current="step".
Each status has its own color: finished steps are green, the step in progress blue, a failed step red, and waiting steps grey. In a row the connector follows the title on the same line and runs on to the next marker, with the description on the line below; on a narrow screen the text moves under the marker.
Demos
Interactive
Move through the steps with the buttons or by clicking a title, and set the current step’s status or any step’s own status. current can go one past the last step, which marks every step finished.
Basic
current counts from 1. Each Step takes a title and a description (or children).
Status
status sets the current step’s status: process (the default), finish, error or wait. A Step’s own status overrides the one it gets from current.
Size
Vertical
Custom icons
finishIcon and errorIcon replace the check and the cross for every step; a Step’s icon replaces its number while it waits or is in progress.
Clickable
With onUpdateCurrent every step’s title becomes a button that covers the step, and clicking it reports the step’s number. disabled keeps a step from being picked.
Steps Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
current | number | undefined | The current step, counted from 1. Without it every step is in progress. | Unreleased |
defaultCurrent | number | undefined | Initial current step when uncontrolled. | Unreleased |
status | process | finish | error | wait | process | Status of the current step. | Unreleased |
size | small | medium | medium | Marker and text size. | Unreleased |
vertical | boolean | false | Lays the steps out in a column. | Unreleased |
finishIcon | ReactNode | undefined | Replaces the check mark of finished steps. | Unreleased |
errorIcon | ReactNode | undefined | Replaces the cross of failed steps. | Unreleased |
onUpdateCurrent | (current: number) => void | undefined | Called with the clicked step’s number. Setting it makes the steps clickable. | Unreleased |
Step Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
title | ReactNode | undefined | The step’s title. | Unreleased |
description | ReactNode | undefined | Shown under the title; children override it. | Unreleased |
status | process | finish | error | wait | undefined | Overrides the status from current. | Unreleased |
icon | ReactNode | undefined | Replaces the number while the step waits or is in progress. | Unreleased |
disabled | boolean | false | Keeps the step from being clicked. | Unreleased |
finishIcon, errorIcon, icon and title all take any ReactNode.