PageDots
A row of dots showing which step of a few is current, the current one a pill that moves on spring.snappy.
import { PageDots } from "@butteryui/react";Demo
When to use it
Use it for
- Showing progress through a few steps, such as an onboarding dialog's
Not for
- Choosing a step: use SegmentedControl or buttons, since the dots take no presses
- Many steps or a long task: use a progress bar or a step list
Examples
Tour progress
Where a short tour is, under its step's title, with the buttons that move it.
Add your coffees
Translated dots
Dots read out in German, "Schritt 2 von 3", with the step kept in state and moved by the buttons beside them.
Bohnen wählen
Welcome card
A welcome card: each step's title and line, the dots under them, and Skip beside Next, which turns into Finish.
Welcome to the roastery
Plan roasts, track green coffee and ship orders in one place.
Variants and states
Four steps
The current dot is an 18px pill; moving on shrinks it as the next one grows, on spring.snappy.
Two and six
Props
PageDots
| Prop | Type | Default | Description |
|---|---|---|---|
countrequired | number | How many steps there are. | |
valuerequired | number | The current step, from 0. | |
label | ((step: number, count: number) => string) | What screen readers hear for the current step. Defaults to "Step 2 of 4". |
It also takes Omit<ComponentPropsWithRef<"div">, "children">.
Accessibility
One image named by the current step, "Step 2 of 4" (label changes the words). The dots take no presses or focus; the controls beside them move between steps.
It takes no keyboard input of its own.
Motion
Its selection indicator slides to the chosen option on `spring.snappy`, inside one track.
With reduced motion: The pill moves to the new step at once, its color changing with it.
Layout
A row of 6px dots 6px apart, the current one an 18px pill. It's as wide as its dots and never shrinks or wraps. It takes no presses or focus, so it has no hit area.