Figma pagination components

Pagination is the component people notice only when it is gone. A table returns four thousand rows and the user has two questions, how much is there and can I get back to where I was, both of which a number row answers inside 56px of height.

These 3 components and 42 variants cover ten layouts, the number buttons underneath them, and the dot indicators used for slides rather than pages.

Pagination, infinite scroll, or load more

Each one charges you differently. Infinite scroll is comfortable for grazing and hostile to finding: it swallows the footer, breaks the back button unless somebody does the work, and leaves no way to say the thing you want was halfway down page three.

A Smashing Magazine write-up of e-commerce usability testing found load more performed best of the three, with people browsing further than they did under pagination while still reading items properly. Nielsen Norman Group's guidance on infinite scrolling lands in a similar place: fine for feeds people browse without a goal, wrong whenever they are searching or comparing.

Numbered pagination keeps winning on refindability, and on anything somebody might bookmark or send to a colleague, which is why search results and data tables still use it.

Ten layouts, page rows and card footers

Two families. The page types are a bare row of numbers with previous and next, either default with the controls pushed to the edges or minimal with everything center aligned, at 1,216px by 56px on desktop and 343px by 52px on mobile.

The card types are footers built to sit under a bordered container at 64px tall, and they carry more: a page count label aligned left, center, or right, versions whose controls come from button groups, and advanced ones pairing that count with previous and next. Advanced is the one to put under a real data table, because it reports position and offers movement in the same row.

Page and card types can each be square or circle shaped, and every type has its own mobile variant at 343px or 375px rather than a squeezed copy of the desktop one.

Numbers, chevrons, and the current page

Under the layouts sit two base components. The number button is 36px square in both square and circle shapes, with default, hover and active, and focused states. The button group base handles what surrounds it: a number, a leading icon button at 111px, a trailing icon button at 84px, and an icon only button at 36px, each with the same three states.

Focused being a first-class state matters here more than on most controls, because pagination is one of the few things people genuinely tab through. Note that 36px is comfortable under a mouse and tight under a thumb, which is a good reason to lean on previous and next on small screens rather than a long list of numbers.

In handoff, the current page needs aria-current so a screen reader announces which page you are on rather than reading out a row of identical links.

Dots are for slides, not pages

The set also includes a dot group, which belongs to carousels rather than tables. Indicators come as dots at 8px and 10px, or as lines 40px wide at 6px and 8px tall, and each group can be framed, which sits the indicators on a pill so they survive being placed over a photograph.

Framed is what you want over imagery; bare dots on a pale photo vanish, and you will not notice in Figma because your placeholder image is an obliging flat grey.

Dots also stop working somewhere around seven items, since nobody counts to twelve in dots. Past that, number things. The whole file is drawn twice, light and dark.

When the rows come from a real query, Untitled UI React pagination is open source, built with Tailwind CSS and React Aria, with page ranges, truncation, and current page semantics already handled.