On this page
Overview
The range counts items, as in 1–60 of 245.
Show code, PagesOfAList.tsx
Variants
Quiet buttons
The buttons are secondary by default, or text for a quiet toolbar, in the control heights of the scale.
Small text buttons in a toolbar.
Show code, SmallToolbar.tsx
Anatomy
Pagination
Range
Previous
Next
Show code, PaginationAnatomy.tsx
Behaviour
While a page loads
The button pressed shows a spinner and focus stays on it.
- Both buttons ignore presses until the page is in.
- At either end, the button with no page to go to stays focusable and unavailable.
Without a known total
Until the total is known, the range shows only the page's items.
Show code, WithoutATotal.tsx
Adapting to width
In a row, the pager keeps its width while a field beside it shrinks.
- Only a container too narrow for the pager itself wraps the buttons below the range.
Show code, ToolbarRow.tsx
Rules
People move through a list without losing their place.
Use it when
- A long list or table read a page at a time, such as invoices
- A list read in batches whose total isn't known yet, such as a feed
- Paging in a toolbar with little room, beside a search field
After a page loads
Keep focus where it is, and scroll the list to its top.
Ends and totals
Show the total once it is known. Hide Pagination where the items fit on one page.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the previous button, then the next; unavailable buttons stay in the tab order. |
| Enter or Space | Asks for the page before or after; nothing at an end or while a page loads. |
| Esc | Hides the focused button's tooltip. |