Pagination
Current is not a link. Pages are named “Page 4, of 12”.
Spec
- Show first, last, ±1 around current, and a more collapse.
- Per-page select: 10 / 25 / 50.
- Unknown total: Prev / Next + “Page n”.
- Accessible name: “Page 4, of 12”, not just “4”.
- Compact: prev / next + status. No page number strip.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Named pages, current is text
Compact
Do / Don't
| Do | Don't |
|---|---|
| Current as text, aria-current. | Current as a link to here. |
| “Page 4, of 12”. | A bare 4 in a box. |
| Compact prev/next + status. | Ten page buttons on a 320px canvas. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
- Nav label: “Pagination”.
- Per-page select is labelled “Per page”.
- Disabled prev on page 1 is not a link.
- Hit 44px.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.