Pagination
Controls for navigating paged data sets, with page size selection
Category: navigation · WCAG 2.2-AA · pagination, navigation, table, data, pages
Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | — | Current page (1-based) |
pageSize | number | — | Items per page |
totalItems | number | — | Total number of items |
onPageChange | (page: number) => void | — | Called with the new page number when it changes. |
onPageSizeChange | (size: number) => void | — | Called with the new page size when it changes. |
pageSizeOptions | number[] | [10, 25, 50, 100] | Options for the page size select |
labels | PaginationLabels | — | Overridable English strings for all visible and accessible text |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-text--cascivo-color-text-muted--cascivo-color-surface--cascivo-color-border--cascivo-color-border-strong--cascivo-color-bg-subtle--cascivo-color-accent--cascivo-color-accent-subtle--cascivo-radius-input--cascivo-radius-button--cascivo-focus-ring
When to use
- Navigating between pages of a paged dataset
- Letting the user change how many items appear per page (onPageSizeChange)
- Pairing with a table or list that loads data in chunks
When not to use
- Navigating a content hierarchy — use Breadcrumb
- Infinite scroll experiences where pages are not exposed
How to build an accessible Pagination in React →
Examples
Basic
<Pagination page={1} pageSize={25} totalItems={103} onPageChange={setPage} />With page size select
<Pagination page={page} pageSize={size} totalItems={103} onPageChange={setPage} onPageSizeChange={setSize} />Custom labels
<Pagination page={1} pageSize={10} totalItems={42} onPageChange={setPage} labels={{ previous: 'Zurück', next: 'Weiter' }} />Related components
- DataTable — DataTable embeds Pagination for its rows
- Breadcrumb — Breadcrumb is for hierarchy, Pagination for sequential pages