Navigation pagination

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

Guidelines

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.

Don't

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

Variant

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

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

Interaction

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.