Pagination
Page list with ellipsis, first/last always visible, and edges that disable themselves instead of linking nowhere.
Middle of many
<Pagination page={2} total={12} href={(n) => `/components/pagination?page=${n}`} />First page
<Pagination page={1} total={12} href={(n) => `/components/pagination?page=${n}`} />Live demo
Click a number: the page reloads with ?page=N in the address bar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | - | Current page (1-based, clamped). |
total | number | - | Total pages. |
href | (n) => string | - | Link builder per page. |
prevLabel / nextLabel | string | Previous / Next | Edge labels. |
Accessibility
- Real links: middle-click and open-in-tab work; current page is
aria-current="page". - Disabled edges render as text with
aria-disabled, not dead links. - Ellipsis is decorative (
aria-hidden).