Presentation
Page Controls
Small filled circles marking position in a short, manually-paged sequence — the carousel's static counterpart to the time-driven Stories Progress bar.
Findings
What's actually in /ig
- Page Controls combine two confirmed pieces: the carousel/navigation context they pair with (._aaqh) and the circle primitive (border-radius: 50%).
Rationale
Why this component exists
Stories Progress fills automatically because time is the driver; a manually-paged carousel has no time axis, so it needs a static position marker instead of a filling one. The system's circle primitive (used for avatars and the carousel's own prev/next buttons) is the natural shape — a dot is just that primitive at its smallest documented scale.
Usage
When to use it
Use when
Showing position in a short (≤10), manually-advanced sequence — a multi-image post, an onboarding carousel.
Avoid when
Position advances automatically on a timer (use Stories Progress) or the sequence has more than ~10 items (switch to a count label, e.g. '3/24').
Anatomy
Anatomy
- 01
Dot (inactive)
- 02
Dot (active, larger or filled)
- 03
Gap between dots
Specification
Spacing, colour, type, and motion
- Dot size
- 6px inactive, 8px active — both circle (border-radius: 50%)
- Gap
- 8px (2× base unit)
- Active fill
- rgb(var(--ig-primary-text))
- Inactive fill
- rgb(var(--ig-stroke))
- Motion
- Width/scale transition on active change, Ease Glide, 150ms
States
States
| State | Behaviour |
|---|---|
| Default | Inactive dots render as 6px circles in rgb(var(--ig-stroke)) with an 8px gap between each dot. |
| Hover | When dots are interactive, the hit area receives rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)) while the dot size stays stable. |
| Pressed/Active | Pressed dots use an overlay slightly deeper than hover overlay; the active page dot remains the larger filled indicator. |
| Focused | Keyboard-focused dots use a 2px var(--ig-stop-magenta) outline with a --radius-xs offset around the hit area. |
| Current page | The current page dot renders at 8px with rgb(var(--ig-primary-text)) fill and transitions with Ease Glide on page change. |
| Disabled | Disabled page controls have opacity reduced and pointer-events none while preserving the current-page indicator. |
Examples
Real interface compositions
Multi-image post
Carousel position dots
Five small dots below the media show which image in the post is active; the marker stays static because the user, not time, advances the sequence.
circle primitive, 6px active dot, 4px inactive dots, --ig-secondary-text
Do / Don't
Do / Don't
Do
- Keep dots fixed-size circles from the shape primitive scale, not a bespoke pagination asset.
Don’t
- Use dots for anything time-driven — that's Stories Progress's job, and mixing the two patterns would contradict the system's own distinction between manual and automatic sequencing.
See also