Progress indicator – Carbon Design System

A progress indicator is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.

Overview
Live demo
Best practices
Feedback

Overview

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.

Live demo

Theme selector

CodeSandbox React Angular Vue Vanilla


  <div className="some-container">
    <ProgressIndicator currentIndex={1}>
        <ProgressStep
          label="First step"
          description="Step 1: Getting started with Carbon Design System"
        />
        <ProgressStep
          current
          label="Second step with tooltip"
          description="Step 2: Getting started with Carbon Design System"
          renderLabel={() => (
            <Tooltip
              direction="bottom"
              showIcon={false}
              triggerClassName="bx--progress-label"
              triggerText="Second step with tooltip"
              tooltipId="tooltipId-0">
              <p>Second step with tooltip</p>
            </Tooltip>
          )}
        />
        <ProgressStep
          label="Third step"
          description="Step 3: Getting started with Carbon Design System"
          secondaryLabel="Optional label"
        />
        <ProgressStep
          invalid
          label="Fourth step"
          description="Step 4: Getting started with Carbon Design System"
        />
        <ProgressStep
          disabled
          label="Fifth step"
          description="Step 5: Getting started with Carbon Design System"
        />
      </ProgressIndicator>
  </div>


  <div className="some-container">
    <ProgressIndicator currentIndex={1}>
        <ProgressStep
          label="First step"
          description="Step 1: Getting started with Carbon Design System"
        />
        <ProgressStep
          current
          label="Second step with tooltip"
          description="Step 2: Getting started with Carbon Design System"
          renderLabel={() => (
            <Tooltip
              direction="bottom"
              showIcon={false}
              triggerClassName="bx--progress-label"
              triggerText="Second step with tooltip"
              tooltipId="tooltipId-0">
              <p>Second step with tooltip</p>
            </Tooltip>
          )}
        />
        <ProgressStep
          label="Third step"
          description="Step 3: Getting started with Carbon Design System"
          secondaryLabel="Optional label"
        />
        <ProgressStep
          invalid
          label="Fourth step"
          description="Step 4: Getting started with Carbon Design System"
        />
        <ProgressStep
          disabled
          label="Fifth step"
          description="Step 5: Getting started with Carbon Design System"
        />
      </ProgressIndicator>
  </div>

Best practices

Logical progression

Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.

Indicate the current step

Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.

Validation

Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an Inline Notification to inform them.

Example of the progress indicator in a payment UI

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub

Components: Pagination

Progress indicator: Style