Pagination
Paged navigation through long lists. Three flavours — numbered for short ranges, prev/next for long, condensed for tight toolbars.
Numbered
Shows page numbers with first / last anchors and an ellipsis when the range is wide.
Prev / next with count
For long-tail lists where page numbers don't help. Always shows the absolute row range and total.
With page-size selector
Bottom-of-table pagination row — count, page selector, and rows-per-page picker.
Condensed
26 px footprint for toolbars and slide-overs. Lose the numbers; keep the arrows and the count.
Parts
| Property | Value | Notes |
|---|---|---|
| button | 30 × 30 px min | 26 condensed · 36 large |
| radius | 6 px | Square hit area; brand-fill for current |
| font | 500 13 px / 1 sans | Tabular-nums on the number cells |
| ellipsis | … | Non-clickable |
| focus | 2 px outline | Keyboard cycles arrows + numbers |
Do & don't
Always show the total count. The operator needs to know how big the dataset is.
Make the user click through 200+ pages. Past 50, switch to filter + search.
Persist page size in localStorage. The operator picked it for a reason.
Reset to page 1 when the user re-sorts. Stay where they were.
Related
For data table pagination patterns, see Data table. For loading more rows, see Skeleton.