Scale — Page Controls

Install

Examples

Active index

current is the zero-based active page.

Count

total sets the number of dots.

Interactive

Click a dot — the active state moves and a change event fires with the new index.

Disabled

Guidelines

Usage

carousels, onboarding steppers, and any short sequence of pages where a compact position indicator helps. For numbered table pagination, use the Table footer instead.

Do

Use for short sequences — a handful of slides or steps.
Give the group a meaningful label for context.
Keep the dots in sync with the content they page through.

Don’t

Don’t use dots for long lists — numbered pagination scales better.
Don’t rely on dots as the only way to advance; pair with arrows or swipe.
Don’t make dots the sole indicator of progress in a long multi-step form.

Accessibility

Pattern: a role="group" of native <button> dots (the WAI-ARIA carousel slide-picker pattern), labelled by label.
Active state: the current dot carries aria-current="true" — colour isn’t the only cue.
Per-dot label: each button announces “Go to page N”.
Target size: the hit area expands to ~24px even though the dot renders at 8px.
Keyboard: each dot is tab-focusable and activates with Enter / Space; disabled removes them from the tab order.

Properties

Tabs — switch between labelled panels.
Progress Bar — continuous progress through a task.
Table — numbered pagination for data sets.

Page Controls