Pagination
Pagination is the row of controls at the foot of a long set that says which slice is on screen and moves the reader to another one. It is the cheapest way to make a position nameable: a page can be linked, bookmarked, reloaded and read aloud to a colleague, none of which is true of a scroll position. Paired with a count, it also tells the reader how big the set actually is before they commit to working through it.
Most of the design is in what the row refuses to do. The window of page numbers holds a fixed set of slots, so it never changes width as the reader moves and the button under the pointer never walks away. The ellipsis is a gap and not a control: no border, no hover, nothing behind it. Arrows at the ends fade rather than vanish, for the same reason. And how many rows a page holds is half the feature, usually bolted on last.
Chevron ends
Best for
A tight row where the ends need to be reachable rather than explained
Anatomy
Four jump buttons on the same 36 as the pages · a seven-slot window that never resizes · ellipsis with no border · arrows fade at the ends
Page 10 of 20
Of-N stepper
Best for
A narrow footer: one number, its total, and a way to jump straight to a page
Anatomy
Current page in ink beside the total · previous and next · the count spelled out · a select that jumps
Page 1 of 26
Labelled ends
Best for
A footer with room for words: Previous and Next survive translation and a screen reader better
Anatomy
Words at both ends, equal weight · the same seven-slot window · count and jump-to-page under the row
Page 1 of 26
Go to page
Best for
Long sets where paging one at a time is not the point: type the page and go
Anatomy
Numbers with a go-to select and its own Go · the boxed and the round shape · Go dead until the page changes
Page 1 of 26
Rows per page
Best for
The other half of paging: how many rows a page is, before which page you are on
Anatomy
Grey track with the active choice lifted onto white · only the active one says rows · the range said in full
Showing 1–5 of 47
Raised Next
Best for
A screen where moving between pages is the main thing happening
Anatomy
Previous and Next lifted onto white · numbers at 32 between them · both fade rather than leave at the ends
Page 1 of 10
Using Pagination
Reach for it when
- A result set long enough that people jump to a page rather than scroll to one.
- Under a table, where the reader also has to choose how many rows a page is.
- Queries paged on the server, where a page is a request rather than a slice of something already loaded.
- A position that has to survive a reload, a shared link or a colleague reading it out.
Reach for something else when
- A feed read in order with no particular destination: a Load more button or continuous scrolling matches how people actually move through it.
- Records that shift position while the set is being read: a cursor anchored to the last record seen beats page numbers that renumber underneath the reader.
- A set that fits on one screen: show all of it; a pager under a list that was never going to be cut is a control with nothing to do.
Where it shows up
Table footers
Under a record table, next to a rows-per-page control and a count. The count is what turns an abstract row of numbers into a set with a known size, rather than a next button that might go on forever.
Search results
Result lists where relevance falls off with depth. Nearly all the traffic sits on the first page, so reaching the previous page and seeing an honest total matter more than a jump to the end.
Back-office queues
Screens where one person works through records over days and has to resume where they stopped. A page number kept in the address survives a reload and a shared link; a scroll position survives neither.
Server-paged queries
Sets too large to fetch at once, where a page is the request itself. How many rows a page holds is part of that request, which is why the choice belongs beside the pager rather than in a settings menu.
Questions
How many page numbers should be visible at once?
Enough to reach the first page, the last page and the neighbours of the current one, and always the same number of them. A window that grows and shrinks as the reader moves makes buttons wander under the pointer. When the whole set fits inside that window, draw every page: an ellipsis standing in for a single page hides nothing and costs a click.
Is pagination better than infinite scroll?
They answer different questions. Pagination produces a position that can be linked, reloaded and returned to, keeps the footer reachable, and suits sets people search rather than browse. Infinite scrolling suits feeds read in order with no destination. A set that changes while it is being read is served badly by both, and a cursor anchored to the last record seen stops items shifting between pages.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.
Pagination
Pagination is the row of controls at the foot of a long set that says which slice is on screen and moves the reader to another one. It is the cheapest way to make a position nameable: a page can be linked, bookmarked, reloaded and read aloud to a colleague, none of which is true of a scroll position. Paired with a count, it also tells the reader how big the set actually is before they commit to working through it.
Most of the design is in what the row refuses to do. The window of page numbers holds a fixed set of slots, so it never changes width as the reader moves and the button under the pointer never walks away. The ellipsis is a gap and not a control: no border, no hover, nothing behind it. Arrows at the ends fade rather than vanish, for the same reason. And how many rows a page holds is half the feature, usually bolted on last.
Chevron ends
Best for
A tight row where the ends need to be reachable rather than explained
Anatomy
Four jump buttons on the same 36 as the pages · a seven-slot window that never resizes · ellipsis with no border · arrows fade at the ends
Page 10 of 20
Of-N stepper
Best for
A narrow footer: one number, its total, and a way to jump straight to a page
Anatomy
Current page in ink beside the total · previous and next · the count spelled out · a select that jumps
Page 1 of 26
Labelled ends
Best for
A footer with room for words: Previous and Next survive translation and a screen reader better
Anatomy
Words at both ends, equal weight · the same seven-slot window · count and jump-to-page under the row
Page 1 of 26
Go to page
Best for
Long sets where paging one at a time is not the point: type the page and go
Anatomy
Numbers with a go-to select and its own Go · the boxed and the round shape · Go dead until the page changes
Page 1 of 26
Rows per page
Best for
The other half of paging: how many rows a page is, before which page you are on
Anatomy
Grey track with the active choice lifted onto white · only the active one says rows · the range said in full
Showing 1–5 of 47
Raised Next
Best for
A screen where moving between pages is the main thing happening
Anatomy
Previous and Next lifted onto white · numbers at 32 between them · both fade rather than leave at the ends
Page 1 of 10
Using Pagination
Reach for it when
- A result set long enough that people jump to a page rather than scroll to one.
- Under a table, where the reader also has to choose how many rows a page is.
- Queries paged on the server, where a page is a request rather than a slice of something already loaded.
- A position that has to survive a reload, a shared link or a colleague reading it out.
Reach for something else when
- A feed read in order with no particular destination: a Load more button or continuous scrolling matches how people actually move through it.
- Records that shift position while the set is being read: a cursor anchored to the last record seen beats page numbers that renumber underneath the reader.
- A set that fits on one screen: show all of it; a pager under a list that was never going to be cut is a control with nothing to do.
Where it shows up
Table footers
Under a record table, next to a rows-per-page control and a count. The count is what turns an abstract row of numbers into a set with a known size, rather than a next button that might go on forever.
Search results
Result lists where relevance falls off with depth. Nearly all the traffic sits on the first page, so reaching the previous page and seeing an honest total matter more than a jump to the end.
Back-office queues
Screens where one person works through records over days and has to resume where they stopped. A page number kept in the address survives a reload and a shared link; a scroll position survives neither.
Server-paged queries
Sets too large to fetch at once, where a page is the request itself. How many rows a page holds is part of that request, which is why the choice belongs beside the pager rather than in a settings menu.
Questions
How many page numbers should be visible at once?
Enough to reach the first page, the last page and the neighbours of the current one, and always the same number of them. A window that grows and shrinks as the reader moves makes buttons wander under the pointer. When the whole set fits inside that window, draw every page: an ellipsis standing in for a single page hides nothing and costs a click.
Is pagination better than infinite scroll?
They answer different questions. Pagination produces a position that can be linked, reloaded and returned to, keeps the footer reachable, and suits sets people search rather than browse. Infinite scrolling suits feeds read in order with no destination. A set that changes while it is being read is served badly by both, and a cursor anchored to the last record seen stops items shifting between pages.
Related blocks
All blocksBe first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.