Skip to main content

Progress Indicator

Pattern

The Progress Indicator pattern visually guides users through a pre-defined multi-step process.

FigmaCode

Usage​

The Progress Indicator pattern visually guides users through a pre-defined multi-step process. It helps eliminate ambiguity and uncertainty by clearly showing users their current position within the process, how much progress they've made, and what steps remain.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { ProgressIndicator } from "@iag/chroma-react-ui.components";

When to use​

Use the Progress Indicator when users are working through a linear, multi-step process and could benefit from understanding their progress. This is particularly effective in scenarios such as:

  • Multi-step forms like applications or registrations.
  • Tasks requiring completion, such as submitting claims.
  • Process navigation where users might need to revisit or edit previous steps.

When to avoid​

Avoid using Progress Indicators when there are fewer than 3 steps, as it may add unnecessary complexity. Also avoid when the progression through steps is non-linear or may change, as a Progress Indicator may not be able to accurately represent the progression and add unnecessary confusion.

Do

  • Use short labels (1-2 words) that clearly indicate the purpose of the step.
  • Place the Progress Indicator consistently across the interface to maintain a cohesive user experience.

Don't

  • Use long or overly complex that may clutter the interface or overwhelm users.

Clickable steps​

The Progress Indicator can be made clickable when users need the flexibility to revisit completed steps in a multi-step process. This is particularly helpful in workflows where users might need to review or adjust prior inputs.