Pagination
Controlled page navigation with compact range and ellipsis logic.
Add it to your project
Eject the complete pagination group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject paginationbash
npx toucan eject paginationapp.tsx
import { Pagination } from '@/components/toucan/pagination';Use when
A large ordered result set is divided into stable numbered pages.
Avoid when
Content is progressively loaded without meaningful page locations.
Example
Page 5 of 20
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Pagination
Pagination
Props type: PaginationProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
boundaryCount | number | 1 | No | Number of pages always shown at the start and end of the range. |
label | string | 'Pagination' | No | Visible or accessible label for the control. |
onPageChange | (page: number) => void | — | Required | Called with the newly selected page number. |
page | number | — | Required | Current page number. |
siblingCount | number | 1 | No | Number of page links shown on each side of the current page. |
totalPages | number | — | Required | Total number of available pages. |
Also accepts the native onChange or HTML element attributes that are not replaced by a Toucan prop.
Type exports
PaginationProps
Accessibility
- Uses a labelled navigation landmark and identifies the current page.
Token families
pagination