Lets users navigate through a list of pages and indicate the current page.


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

When to use

  • To enable users to focus on a few items at a time.
  • For showing the complete list of pages the user can visit.
  • To let user jump to any page in the list quickly and easily.


Anatomy of pagination
  1. Page Label: Optionally add page labels along with left/right chevron icons to indicate navigation.
  2. Page count: Indicates the page count of the specific page.
  3. Active Page: Indicated which page is currently set active.

Best Practices

  1. 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.
  2. Previous and next chevrons or links 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 choose the page they wish to navigate to.
  3. Use an inline select within the pagination bar so the user can change the amount of data displayed per page.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.