Pagination
navigationList-based pagination navigation with current-page state, disabled previous/next controls at bounds, optional links, and a labelled navigation landmark.
Preview
Stateful buttons
Showing page 3 of 6
Link controls at first page
Usage
import { Pagination } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';
<Pagination
currentPage={page}
pageCount={12}
onPageChange={setPage}
aria-label="Results pages"
/>
const pageHref = (targetPage: number) => '?page=' + targetPage;
<Pagination
currentPage={page}
pageCount={12}
hrefForPage={pageHref}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
pageCount | number | required | Total number of pages |
currentPage | number | required | Current one-based page number; clamped into range |
onPageChange | (page: number) => void | -- | Called when an enabled page, previous, or next control is activated |
hrefForPage | (page: number) => string | -- | Generates hrefs for enabled controls; controls render as links when provided |
aria-label | string | 'Pagination' | Accessible label for the navigation landmark |
class | string | -- | Additional classes on the nav element |
Accessibility
- Landmark: Renders a
<nav>with a configurablearia-label. - Structure: Controls are grouped in a list so screen readers announce pagination as a bounded set.
- Current page: The active page control uses
aria-current="page"and an accessible label likePage 2. - Disabled bounds: Previous is disabled on the first page and Next is disabled on the last page. Link mode uses
aria-disabled, removeshref, and setstabindex="-1". - Keyboard: Button mode uses native button semantics. Link mode uses native anchor navigation for enabled controls.
Do / Don't
Do
Use Pagination when users need direct access to nearby pages and clear previous/next movement through a finite result set.
Don't
Don't use pagination for endless feeds or progressive disclosure; use loading patterns designed for continuous content.