Pagination Design

The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing px-3 (12px), py-2 (8px), gap-1 (4px), px-1 (4px), constrained by max-w-lg. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.

Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.

A buyer searches an industrial parts catalog and gets 312 results. Below the list she sees 'Showing 21 to 40 of 312 results', Previous and Next buttons, and page numbers 1, 4, 5, 6 and 16, with page 5 highlighted. She jumps to the last page to check the oldest listings and then back to page 2.

Each page has its own URL, including her filters for brand and voltage, so when she shares page 3 with a colleague he sees exactly the same results. When she changes the sort order to price, the results reset to page 1 and the focus moves to the results heading, so she is not left at the bottom of an empty-looking page.

On her phone, the same pagination shows only Previous, the current page and Next, each large enough to tap comfortably, plus the result count. After trying both, the team later tests a 'Show 20 more' button on mobile and finds that buyers browse deeper with it, while desktop users still prefer numbered pages for comparing results.

Search results and stores use numbered pagination so users can return to a page and compare items.

Data tables in admin tools combine pagination with rows-per-page selectors and total counts.

Blogs and archives often use simple Newer and Older links.

Page links should be at least 36 to 44px square for easy clicking, with the current page clearly filled or outlined. Group previous and next buttons with text labels at the edges, and center the page numbers. Show the result count nearby in quieter text.

On mobile, show fewer numbers: previous, current page, next, and perhaps the last page. Make targets at least 44px, and consider a 'Load more' button, which is often easier than tapping small numbers.

Wrap pagination in a nav with an aria-label of Pagination, use real links with page numbers in the URL, and mark the current page with aria-current="page". After loading a new page dynamically, move focus to the results heading.

In a design system, pagination is a component that takes the current page, total pages and a link builder, and handles truncation with ellipses internally. Provide a compact variant for mobile and a load-more variant, and pair it with a result-count component and a rows-per-page select for tables.

Track how many users go beyond the first page. If few do, improve sorting and filtering so the best results appear first. Compare engagement between pagination and load-more variations.

Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:

Use 'Previous' and 'Next' rather than arrows alone. Result counts should be precise and human: 'Showing 21 to 40 of 312 results'. For load-more buttons, say what will load: 'Show 20 more products'.

If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:

Pagination often appears with data tables, search results and loading states for dynamic content.