Pagination

In progress | Storybook link coming soon

When there is a large dataset or long lists (tables, search results, item galleries).
When performance or load times could be impacted by infinite scroll.
When users need to reference or return to specific locations in a dataset.

Continuous, discovery-focused feeds: prefer infinite scroll or “Load more.”.
Task completion requires consuming items in order: use wizards or dedicated flows instead of arbitrary page jumps.
Switching unrelated page modes: use Segmented control or Tabs instead of page numbers.

Do provide “Next” and “Previous” Buttons as these provide intuitive navigation for sequential browsing. Disable the “Next” and “Previous” Buttons if not relevant.
Do provide “Results per page” options for large data sets. This lets users control how much data they see at once.
Do place Pagination below the Data grid (or page content), left aligned. This ensures side panels opening from the right will not overlap the Pagination.
Do use the “results” section to indicate the number of items per page by default or when filtered.
Do show a teleport when there are large datasets to help the user navigate to a specific page.
Don’t use Pagination when there are fewer than ~20 items per page as this can be cumbersome for the user.

Ideally, every page should have its own URL so that links to specific pages can be bookmarked or shared.
If possible, items on each page should load without reloading the entire page. Use a loader and skeletons to indicate that content is loading.
Consider loading times when deciding whether to use Pagination or other alternatives such as lazy loading.
When the teleport variation is being used, the user can navigate to a desired page by typing the page number and pressing Enter on the keyboard.
If there are filters, selection, or search, preserve those as the user moves across pages.

Data grid or long lists; “rows per page” Select; prev/next Buttons; preserve active Search / filters across pages.

Documentation Index