Pagination
Numbered controls for moving through a long set of results a page at a time. It shows where you are and how far there is to go.
Preview
When to use
- Below tables and lists with more results than fit on one page.
- When people need to jump to a known page or come back to the same place later.
Reach for something else
- For a feed people browse rather than search: load more, or scroll to load.
- For a short linear sequence of steps: that is a Dot Stepper.
Anatomy
- 1
Previous button
Goes back one page; disabled on the first.
- 2
Page buttons
The first page, the last page and a window around the current one.
- 3
Ellipsis
Stands in for the pages hidden between the window and the ends. Not interactive.
- 4
Current page
A filled surface in brand ink.
- 5
Next button
Goes forward one page; disabled on the last.
States
Full
Page numbers with ellipses, and Previous and Next with labels.
Compact
Icon-only Previous and Next around a Page 3 of 12 label, for narrow spaces.
Hover
A soft grey wash on the page button.
Current
The filled page; pressing it does nothing.
Disabled
Previous on the first page, Next on the last.
Accessibility
- The controls sit in a <nav> with aria-label="Pagination".
- Each page is a link or button with an aria-label such as "Page 4"; the current one carries aria-current="page".
- Icon-only Previous and Next carry aria-labels, and use the disabled attribute at the ends.
- The ellipsis is aria-hidden, or read as "more pages", never as a control.
Source
The Pagination is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block