Pagination
NewPages of a long list: a summary of where you are on the left, round page buttons on the right, the current page in ink. On phones the numbers fold into 3 / 25 between the arrows.
Playground
page
pageCount
siblings
disabled
theme
<Pagination page={5} pageCount={25} onPageChange={setPage} />With a summary
Say what is on screen and how much there is: "1–50 of 1,241 orders". Press the pages.
Which pages show
The first and last page, the current page with siblings either side, and a gap wherever pages are skipped. When the whole run fits in the room the gaps would take, every page shows.
| Where you are | What shows |
|---|---|
| Page 1 of 25 | 1 2 … 25 |
| Page 12 of 25 | 1 … 11 12 13 … 25 |
| Page 25 of 25 | 1 … 24 25 |
| Page 4 of 7 | 1 2 3 4 5 6 7 |
While a page loads
Pass disabled while the next page is on its way, so a second press cannot queue another request.
In both themes
Light
Dark
Guidelines
- Put it under the list it pages, inside the table frame when there is one (TableFrame footer).
- Keep the page in the URL (?page=3), so a reload, a shared link or the back button returns to the same page.
- Nothing to page (one page): the buttons do not render; the summary still does if you pass one.
Accessibility
- A nav named "Pagination" (pass label to translate it), so it is a landmark.
- The current page carries aria-current="page". Page buttons are named "Page 3"; pass pageLabel to translate.
- The arrows are icon buttons with their own names ("Previous page", "Next page").
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pageRequired | number | None | The current page, from 1. |
pageCountRequired | number | None | How many pages there are. |
onPageChangeRequired | (page: number) => void | None | Called with the page to show. |
summary | ReactNode | None | Left of the pages, e.g. "1–50 of 1,241 orders". |
siblings | number | 1 | Pages either side of the current one. |
disabled | boolean | false | Every control rests, e.g. while loading. |
label | string | 'Pagination' | Accessible name of the navigation. |
previousLabel | string | 'Previous page' | Name of the back arrow. |
nextLabel | string | 'Next page' | Name of the forward arrow. |
pageLabel | (page: number) => string | "Page 3" | Name of each page button. |