Pagination

Anatomy

Edit in Figma

• Previous page link: Always links to the page before the current page.
• Next page link: Always links to the page after the current page.
• Page numbers: Lets users skip to whatever page the number represents.
• Current page: The page the user is on right now.
• Truncation indicator: A visual hint that a chunk of page links are skipped.

Best practices

• Every page should have a URL.
• Paginate content that would be easier to browse when it is segmented.
• Place Pagination at the end of the page content.
• If the content is only long enough for a single page, don't render Pagination.
• Don't show too many or too few items per page.
  • Too many items per page could be overwhelming.
  • Too few items per page could be frustrating to browse.