Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
Live Demo
Actually clickableViewing results on page 3
48 pages · 20 per page
What you just saw:The "‹ 1 2 3 … 48 ›" row under a set of search results, or the page number strip at the bottom of a Taobao product listing, are both pagination.
What it actually is
The core value of pagination is locatability: users can remember "the thing I want is on page 3" and jump straight back to it. For ordered, paged data — article lists, search results — it is still the most dependable option.
Anatomy · What it's made of
Prev / Next上下页按钮
Disabled and dimmed on the first and last page
Page Numbers页码
Current page highlighted, ellipses on both sides
Current当前页
Bolded or recolored
Total Info总数信息
For example "1,240 results"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Content has a clear order and users may want to return to it | Yes |
| The total is finite and can be shown up front | Yes |
| The URL must address a specific page (SEO / sharing) | Yes |
| Infinite-scroll social feeds | No |
| The data set is enormous and users never jump to a page | No |
On phones, 10 items per page plus a row of page numbers is expensive to operate, and users lose track of where they are.
When the user goal is "keep scrolling" rather than "reach page 48", pagination is an obstacle.
Similar Patterns
Don't mix these upPaginationCurrent
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
In one line:A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Load More
加载更多
A "Load more" button at the bottom of a list that appends another batch when tapped.
How to tell AI
Three levels of promptAdd the component name and specifics
Add pagination at the bottom of the list with previous/next buttons and page numbers, highlighting the current page and using ellipses when the range overflows.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something to flip pages.
Say this instead
Add pagination at the bottom of the list — ‹ 1 2 3 … 48 › — with the current page highlighted, prev/next disabled on the first and last page, only prev/next on phones, and the page number synced to the URL.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.