# ProgressIndicator

> Step N of M as a row of segments, for onboarding flows, wizards and carousels. Zero JS.

URL: https://apogee.avaui.dev/docs/progress-indicator
Last updated: 2026-10-15

Step N of M as a row of segments, for onboarding flows, wizards and carousels. Zero JS.

Last updated October 15, 2026

```astro
<ProgressIndicator total={5} current={2} aria-label="Onboarding" />
```

## Add

```sh
npx @ava-ui/apogee add progress-indicator
```

No Apogee dependencies.

## Usage

```astro
---
import ProgressIndicator from '@/components/apogee/ProgressIndicator/ProgressIndicator.astro'
---
<ProgressIndicator total={4} current={step} aria-label="Checkout" />
```

Use Progress for a continuous percentage; ProgressIndicator for discrete steps.

## API

`@composable`. Any other native attribute passes through to the root.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `total` | `number` | — | Number of steps. |
| `current` | `number` | — | The step in progress, 1-based, clamped to `0..total`. Segments fill up to and including it; it is announced as “Step 2 of 5”. |
| `color` | `'primary' \| 'neutral' \| 'critical' \| 'positive' \| 'warning'` | `'primary'` | Hue of the done segments. |
| `aria-label` | `string` | `'Progress'` | Accessible name. |
| `variant` | `'segments' \| 'dots'` | `'segments'` | Segments fill up to the current step; dots mark only the current one, in a window of seven when there are more. |
| `class` | `string` | — | Extra classes on the root, merged last. |

## Variants

```astro
<ProgressIndicator total={5} current={3} color="primary" />
<ProgressIndicator total={5} current={3} color="neutral" />
<ProgressIndicator total={5} current={3} color="critical" />
<ProgressIndicator total={5} current={3} color="positive" />
<ProgressIndicator total={5} current={3} color="warning" />
```

## Dots

```astro
<ProgressIndicator variant="dots" total={5} current={2} aria-label="Slide 2 of 5" />
<ProgressIndicator variant="dots" total={12} current={9} aria-label="Slide 9 of 12" />
```

## States

```astro
<ProgressIndicator total={4} current={0} />
<ProgressIndicator total={4} current={2} />
<ProgressIndicator total={4} current={4} />
```

## Examples

An onboarding step with the indicator above its actions:

```astro
<Card class="max-w-sm">
<ProgressIndicator total={4} current={2} aria-label="Setup progress" />
<p class="mt-4 font-semibold">Invite your team</p>
<p class="text-sm text-neutral-faded">Step 2 of 4. You can skip this and do it later.</p>
<div class="mt-4 flex justify-end gap-2">
  <Button variant="ghost" color="neutral">Skip</Button>
  <Button>Continue</Button>
</div>
</Card>
```

## Accessibility

-   One `role="progressbar"` with `aria-valuemin`/`max`/`now` and `aria-valuetext="Step 2 of 5"`.
-   The segments are decorative; the name and value carry the meaning.

## Tokens

| Token | Used for |
| --- | --- |
| `--background-{hue}` | Done segments (`neutral` uses `--background-inverted`) |
| `--background-neutral` | Remaining segments and dots |

## Do / Don’t

-   **Do** pair it with visible “Step 2 of 5” text when the step count matters.
-   **Don’t** use it for more than about eight steps. The segments get too thin to read.

## Content

-   Set `aria-label` to name the flow (“Setup progress”); the step count is announced for you.

## Related

[

ProgressA determinate or indeterminate progress bar.

](https://apogee.avaui.dev/docs/progress)[

CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.

](https://apogee.avaui.dev/docs/carousel)[

StepsA vertical progress list for onboarding, checkout, and wizard flows.

](https://apogee.avaui.dev/docs/steps)