Progress Indicator

A Progress Indicator is an interactive component representing progress in a linear, multi-step process.

Anatomy

Progress indicator / Style / Horizontal
Progress indicator / Style / Vertical

Item

Name

Description

Component

Optional

1

Circle

A status indicator showing whether the step is current, past (completed), or future (not started).

 

 

2

Progress bar

Visual lines that connect steps, helping to indicate the overall progress.

 

 

3

Text

A short descriptive label for the step name.

 

 

4

Optional label

Appears below the step name when the step is optional.

 

Yes

5

Step counter

Displays the current step number and total steps. Exclusive to the vertical variant.

 

 

6

Expand button

Expands or collapses the component. Exclusive to the vertical variant.

Icon Button