Pagination
Page navigation with prev/next, page buttons, and ellipsis. Purely controlled.
Example
Page 5 of 20
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
page | number | — | Required | Current page number |
totalPages | number | — | Required | Total number of pages |
onPageChange | (page: number) => void | — | Required | Called when page changes |
siblingCount | number | 1 | No | Number of sibling pages around current |
boundaryCount | number | 1 | No | Number of pages at start/end |
label | string | 'Pagination' | No | aria-label for the nav element |
Accessibility
- <nav> landmark with aria-label
- aria-current="page" on current page button
- aria-label on all page buttons ("Go to page N")
- Prev/next disabled at boundaries
- Ellipsis hidden from screen readers (aria-hidden)
Related Tokens
--pagination-gap--pagination-item--pagination-surface--pagination-on-surface--pagination-border