Pagination helps users navigate between large groups of content separated by pages.


Pagination is used for splitting up content into several pages, with a control for navigating to the next or previous page.

When to Use

Use pagination when the amount of content required exceeds one page.

Best Practices

Identify the current page

Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.

Provide various options for navigating

Previous and next chevrons are the most useful way for the user to move forward or backward through pages of data. Provide an inline select in which users can directly choose the page they wish to navigate to.



Pagination anatomy diagram
  1. Icon: Left arrow, allows the user to go to previous page
  2. Container
  3. Current Page Number
  4. Icon: Down filled arrow, allows the user to select a page
  5. Total Pages
  6. Icon: Right arrow, allows the user to go to the next page


  • If there are no more pages prior to the first one shown, the first arrow is in the disabled state.
  • If there are no more pages after what is shown, the last arrow is in the disabled state
  • See Figma UI Kit for disabled state