Skip to content
search icon
Component Status

Navigation pagination

Pagination allows long sets of data or content to be divided into multiple pages with controls to navigate between these pages.


When content will take a long time to load or is better viewed in smaller sets, pagination can be used to divide this content into multiple pages. Pagination only loads one page at a time.


  • Do not lazy load content as the user scrolls when using pagination.


There are three variations of pagination to use: Page numbers, Total + page numbers, Switcher + total + page numbers.

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.


The active page number always stays in the middle, shifting the previous numbers. For example, in pagination with five page buttons but ten pages---pages 1, 2, 9, and 10 will not be able to be centered when they are active, but the rest will be.

Edit this page on GitHub