Pagination
Page-by-page navigation for long lists. The window of numbers collapses with ellipses so the control stays the same width at page 1 and page 200.
import Pagination from '@/components/ui/Pagination';Source: src/components/ui/Pagination.tsx
Examples
The sliding window
Page 5 of 20 — jump to 1 or 20 to see the window collapse.
Props
<Pagination> props
| Prop | Type | Default | Description |
|---|---|---|---|
pagerequired | number | — | — |
pageCountrequired | number | — | — |
onPageChangerequired | (page: number) => void | — | — |
className | string | '' | — |
Accessibility
- Each number is a button with its page in the accessible name, and the current page is aria-current.
Usage
Do
- Reflect the page in the URL so a result set can be shared and the back button works.
- Keep the page size stable; a changing page size makes page numbers meaningless.
Don’t
- Don’t render it for a single page — there is nothing to navigate.
Related:Tabs