SteppedTracker contains multiple TrackerStep child components. Each TrackerStep indicates its current status through its icon and color. In addition, the connectors indicate the current active step and the user’s progress through the process.

You can add a label to the TrackerStep using the StepLabel component.

SteppedTracker supports multiple stage and status values for each TrackerStep child component.

Available stage values are "pending" and "completed". Note: "active" is not a valid value: the active step is defined by the activeStep prop on the SteppedTracker component.

Available status values are "warning" and "error".

When stage and status are both set, the order of precedence for which icon is show is as follows: "completed" > "active" > "error|warning" > "pending"

You can vertically orientate a stepped tracker, with labels displayed on the right of the icon in the step node.

Use a vertical stepped tracker when horizontal space is limited in the context of the application or when there are a large number of steps in the process – for example, more than 8.

In normal circumstances, once the user completes a step, you should advance the active step, and change the status of the current active step in unison.

It may not be appropriate in some circumstances, but it's possible to control the state of steps and the active step independently if users can revisit previous steps or complete steps nonsequentially.