ProgressIndicator

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

Last updated

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

Add

npx @ava-ui/apogee add progress-indicator

No Apogee dependencies.

Usage

---
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

Show code
<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

Show code
<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

Show code
<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:

Invite your team

Step 2 of 4. You can skip this and do it later.

Show code
<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.
CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.
StepsA vertical progress list for onboarding, checkout, and wizard flows.