Navigation
Pagination
Page controls with a current-page marker, collapsing ranges, and link mode.
- Deployment 13page 3
- Deployment 14page 3
- Deployment 15page 3
- Deployment 16page 3
- Deployment 17page 3
- Deployment 18page 3
Page 3 of 8 · 47 deployments
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add paginationWrites components/ui/pagination.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Pagination } from "@/components/ui/pagination";API reference
Props and composition points for Pagination. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
page / pageCount | number | None | Current page (1-based) and the number of pages. Values are clamped to the valid range. |
onPageChange | (page: number) => void | None | Called when a page button is activated. Required in button mode. |
hrefFor | (page: number) => string | None | Renders real links instead of buttons. Use this for server-rendered lists so URLs remain shareable. |
siblingCount | number | 1 | Pages shown on each side of the current page before collapsing into an ellipsis. |
labels | { previous?, next?, navigation? } | None | Localized control labels. The navigation label defaults to Pagination. |
Dependencies: no extra packages, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Renders a nav landmark with an accessible name, so it appears in the landmark list and can be skipped.
- The current page uses aria-current=page and is not a control. Disabled previous and next are aria-disabled spans, not focusable dead ends.
- Use hrefFor whenever the list has real URLs; buttons alone lose deep links, back/forward, and open-in-new-tab.
- Ellipses are decorative and hidden from assistive technology. Every numbered page keeps a descriptive accessible name.
Keep the page size stable across navigation and move focus to the results heading after a page change so keyboard users do not start at the end of the list.
Used in production
The Aback products whose interfaces shaped this component.
This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.