Pagination
Controlled pagination with item range and edge controls.
Use Pagination when a long result set is split into stable pages and readers need direct navigation.
Interactive example
Loading interactive example
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
disabled | boolean | prop | No | false |
firstPageLabel | string | prop | No | 'First page' |
formatSummary | (from: number, to: number, total: number) => string | callback | No | (from, to, count) => `${from.toLocaleString()}–${to.toLocaleString()} of ${count.toLocaleString()}` |
label | string | prop | No | 'Pagination' |
lastPageLabel | string | prop | No | 'Last page' |
nextPageLabel | string | prop | No | 'Next page' |
onPageChange | (page: number) => void | callback | No | undefined |
page | number | binding | No | 1 |
pageSize | number | prop | No | 50 |
previousPageLabel | string | prop | No | 'Previous page' |
showFirstLast | boolean | prop | No | true |
siblingCount | number | prop | No | 1 |
size | ControlSize | prop | No | 'md' |
summary | boolean | prop | No | true |
total | number | prop | Yes |
Source
Loading source