Navigation
Pagination
Page navigation. It marks the current page and disables the arrows on the first and last page. Screen readers announce the current page.
ReactVueWeb Components
View in Storybook Playground
Examples
<Pagination count={10} page={page} onChange={setPage} />Props
| Name | Type | Default | Description |
|---|---|---|---|
count required | number | — | Total number of pages. |
page required | number | — | Current page (1-based). |
onChange required | (page: number) => void | — | Called with the next page when a control is activated. |
siblingWindow | number | 7 | Max number of numbered buttons to show (window). @default 7 |
showArrows | boolean | true | Show previous/next arrows. @default true |
label | string | Pagination | Accessible label for the nav landmark. @default 'Pagination' |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.