UI components · Navigation
Pagination
Also called: Pager, Page numbers, Paging, Page navigation
Splits a large set of data into pages, with page numbers and Previous and Next buttons for moving between them.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a paginator at the bottom right of the orders table. On the left, show "326 items." In the middle, put Previous, the page numbers, and Next, with an ellipsis when there are too many pages and the current page highlighted with a dark background and white text. On the right, add a page size select for 10/20/50 per page and a jump-to-page input. When the page changes, fetch the data again and scroll back to the top of the table.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Pagination is what you need.
Use Pagination when
- Admin tables, order lists, and other large data sets where users need to find or go back to a specific page
- Search results pages, where users want to know roughly how many results there are and how far they've gotten
- When data needs to be exported or printed by page, or discussed with others by page number
Pick something else when
Content browsed continuously, like social feeds or masonry image grids
Use insteadInfinite ScrollOnly a dozen or so records in total, which fit on one page
Long lists on phones, where small page number buttons are hard to tap. "Load more" fits better.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Showing a full paginator when there's only one page of data
- 02
Listing every page number for hundreds of pages instead of collapsing them with ellipses
- 03
Leaving the page scrolled to the bottom after switching pages, so users have to scroll back to the top of the table themselves
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Previous and Next buttons, a list of page numbers, and ellipses. The full version also has a total count, a page size selector, and a jump-to-page input.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
When a list or table has hundreds or thousands of records, loading them all at once is slow and makes things hard to find. Pagination slices the data into 10, 20, or 50 per page and shows page numbers at the bottom for jumping around. A full paginator also has a total count, a page size selector, and a "Go to page" input.
Pagination suits data that users need to locate and come back to, like an orders table in an admin panel. Users can remember "it's on page 3" and can jump straight to the last page. Content people scroll through casually, like a social feed, is better suited to infinite scroll or a "Load more" button.
Pagination usually sits at the bottom right or bottom center of the table or list. When the data fits on one page, hide the pagination. Don't show a lone page "1."
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-pagination- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
nav[aria-label*="pagination" i].pagination.ant-pagination.el-pagination[class*="MuiPagination-root"].arco-pagination.t-pagination.n-pagination[data-slot="pagination"]
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026