Last Updated on Sep 29, 2022
Pagination is used when there are too many results on a page. It allows the user to navigate between pages.

Design Principles

  • Pagination is mostly used with tables, but can be used for other kinds of ways to display data.
  • Pagination is optional. Some types of tables or data will not require its use.
  • The component has several variants with various levels of complexity. Use the simplest variant that works best for your data. Items showing 6+ pages, “Rows Per Page”, “Go to Page”, etc. are acceptable, but should only be used if the navigating data requires them. Their usage can be influenced by system load times, amount of data, and screen space.
  • Usually, pagination is positioned in the bottom-right, below content.
  • Previous button is disabled by default because the data loaded should be "Page 1" of a large set.

Do's and Don'ts

Use the simplest variant of pagination as possible.
Check with your development teams to see if pagination is required.
Don’t mix infinite scrolling and pagination. Choose one or the other.
Related Components