Pagination
readyRange text, page selector, and prev/next controls for a table footer.
The Pagination bar sits under a table: how many items are shown, which page, and how many pages there are, with previous/next controls. Promoted from Classic’s private copy — nothing about it is product-specific.
Anatomy
1 - 25 of 2,892 items
1
of 17 pages - 1 Range text — "1 - 25 of 2,892 items"
- 2 Page selector — current page, of N pages
- 3 Prev / next — disabled at the first / last page
Variants
Default
1 - 25 of 2,892 items
1
of 17 pages <Pagination rangeStart={1} rangeEnd={25} total={2892} page={1} pages={17} />With items-per-page
The Figma component ships an itemPerPage=true variant alongside the default
— set itemsPerPage to render it.
Items per page
1 - 10 of 2,892 items 10
1
of 290 pages <Pagination itemsPerPage={10} rangeStart={1} rangeEnd={10} total={2892} page={1} pages={290} />States
2,868 - 2,892 of 2,892 items
17
of 17 pages <Pagination rangeStart={2868} rangeEnd={2892} total={2892} page={17} pages={17} />Usage
1 - 25 of 200 items
1
of 8 pages Pair with Data Table, at the bottom of the scroll region.
Items per page
1 - 10 of 200 items 10
1
of 20 pages Don't show items-per-page unless the count is actually adjustable.
Accessibility
- Prev/next are real
<button>elements witharia-label, disabled at the ends rather than merely styled to look disabled. - The page and items-per-page selectors are static in this prototype (nothing is wired to real pagination), styled consistently with each other so one doesn’t read as more interactive than the other.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
rangeStart | number | 1 | First item index shown. |
rangeEnd | number | 25 | Last item index shown. |
total | number | 2892 | Total item count. |
page | number | 1 | Current page. |
pages | number | 17 | Total pages. |
itemsPerPage | number | — | Shows the items-per-page selector when set. |
Related
- Data Table — the table Pagination sits under.