Progress indicator

Step name: text that describes what step the user is currently on
Secondary text: optional text to provide additional clarity to user
Completed segment: step that is complete
Active segment: step that user is currently on
Not started segment: step that has not been started

Visual representation of the status of an ongoing process or task

How they help

Progress indicators help users understand how much of a task is complete and how much remains, providing feedback and reassurance during a process.

Example of progress indicator

Visual reference for anatomy

There are 2 variants of the component: step name and with secondary text.

Visual representation of variants

Progress indicator | Delish Universal Library

Figma UI Kit for designers