ProgressDots

Step progress indicator driven by current: completed steps and the current step render as expanded pills, pending steps as small dots. Passing onDotClick makes dots interactive step-navigation targets; labels surface as hover tooltips.

Usage

import { ProgressDots } from "@instruments/materia-ui/components/progress-dots";

Best practices

Use ProgressDots for position in a short stepped flow (wizard, carousel); continuous 0–100 completion is Progress.
Pass onDotClick only when steps are navigable - it turns each dot into a focusable button; labels surface as hover tooltips.
Mount ReducedMotionProvider at the app root - the dots animate via m.* (LazyMotion).

Props

Prop	Type	Description
className	`string`	Additional CSS classes
current(required)	`number`	Current step (0-indexed)
labels	`string[]`	Labels for each step (shown in tooltips)
onDotClick	`(index: number) => void`	Callback when a dot is clicked. If provided, dots become clickable.
total(required)	`number`	Total number of steps

Composition

Builds on

Flex, Tooltip