Pagination
Pages, the current one and step controls with explicit labels.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add paginationDependencies
What add pagination installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
3 examples · 1 componentPages
A short list of pages with the current one marked.
Long ranges
paginationRange keeps the first, last and nearby pages; try the step links to reach either end.
Router links
paginationLinkClass styles a framework link; pass aria-current on the current page.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
PaginationNavigation landmark; aria-label defaults to "Pagination". | nav | "Pagination" |
PaginationContent / PaginationItemList of controls that wraps on narrow screens. | ul / li | — |
PaginationLinkA page; isActive marks the current one with aria-current="page". | a | — |
paginationLinkClassLink styles for router links (NextLink, react-router…); set aria-current yourself. | string | — |
PaginationPrevious / PaginationNextStep links with a visible label (only the chevron below the sm breakpoint). label or children change the text; disabled at either end. Chevrons flip in RTL. | a | "Previous" / "Next" |
PaginationEllipsisSkipped pages; the dots are decorative. | span | "More pages" |
paginationRange(page, total, siblings?)Pages to render: first, last, the current page and its siblings, with "ellipsis" for the gaps. siblings = 0 keeps a long range on one line on phones. | function | siblings = 1 |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Rest | Ghost look, like Button variant="ghost". |
| Hover | Muted surface. |
| Focus visible | 2 px ring outline merged with the border. |
| Current | aria-current="page" takes the outline look. |
| Disabled | Previous or Next at either end: aria-disabled, no href, 50% opacity. |
Accessibility
The nav is a named landmark and the list exposes how many controls it holds. Use a distinct aria-label if a page has more than one pagination.
The current page is announced with aria-current="page"; page numbers keep their visible text as the accessible name.
Previous and Next always carry a text label. At either end they stay in place as disabled links: out of the Tab order but still announced as unavailable, so the layout does not jump.
Targets are 36 px and grow to 44 px on touch screens; the ellipsis is hidden and replaced by an sr-only label.
Server-safe: plain links, no client JavaScript.