---
title: Progress steps
summary: Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps.
description: Use progress steps to display compact onboarding, checkout, and setup progress.
added-in: '1.5.0'
related: [/ui/components/progress, /ui/components/step]
source: core/scss/ui/_progress.scss
css-vars: progress-steps
classnames:
  component:
    - class: progress-steps
      desc: Container element
  part:
    - class: progress-steps-item
      desc: One step; mark the reached ones as active
---
import Example from '@components/Example.astro';
import ProgressSteps from '@ui/ProgressSteps.astro';

## Default markup

Use `.progress-steps` as the container and `.progress-steps-item` for each segment.

```html
<ol class="progress-steps" aria-label="Onboarding progress">
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
</ol>
```

The default structure:

<Example>
<ol class="progress-steps" aria-label="Onboarding progress">
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
</ol>
</Example>

## Variants

### Current and completed step

Use color classes to mark completed steps. Set `aria-current="step"` on the current item.

<Example>
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
</Example>

### Custom labels

Use hidden labels so assistive technologies can announce meaningful step names.

<Example>
<ProgressSteps labels={['Account', 'Profile', 'Billing', 'Review']} active={3} ariaLabel="Checkout progress" />
</Example>

### Color state

Use contextual background classes on completed and current items to match the state colors of your flow.

<Example>
<div class="mb-2">
  <ol class="progress-steps" aria-label="Green progress">
    <li class="progress-steps-item bg-green" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
  </ol>
</div>
<div class="mb-2">
  <ol class="progress-steps" aria-label="Orange progress">
    <li class="progress-steps-item bg-orange" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
  </ol>
</div>
<div>
  <ol class="progress-steps" aria-label="Red progress">
    <li class="progress-steps-item bg-red" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
  </ol>
</div>
</Example>

### Width and layout utilities

Use utility classes on `.progress-steps` to control width and placement in layouts.

<Example>
<ProgressSteps count={5} active={1} class="w-50" id="profile-progress" ariaLabel="Profile completion" />
</Example>

## Accessibility

- Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a `visually-hidden` span. The filled shape alone does not carry it.
- Mark the current step with `aria-current="step"`.
- If you use the underlying progress bar to draw the line, give it `role="progressbar"` with the step number as `aria-valuenow` and the total as `aria-valuemax`.
- Do not rely on the color of a circle to say "done". Add an icon or a word.