Skip to content
On this page

pagination Pagination

Pagination

Usage

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Style

Default

Truncate

Short

None

Far

Jump to page

Detail

With Detail

Without Detail

Pattern Rule

Best Practice

For smaller screens, it's best to show a maximum of seven pages (including the ellipsis)

For larger screens, show a maximum of 14 pages (including the ellipsis).

On all platforms, pagination should

  • Only be used for lists with more than 25 items

Web pagination should

  • Be placed at the bottom of a long list that has been split up into pages
  • Pagination should navigate to the previous and next set of items in the paged list
  • Hint when merchants are at the first or the last page by disabling the corresponding button

Do

  • Use Pagination to let users page through items where a user is trying to find a specific item.
  • Add custom, context-specific information to page labels and left and right page controls to give customers more clarity about where they are and where they’re going, when needed.
  • Show current page count whenever possible so users understand where they are in a dataset, and so that they know the content in view has been updated if they navigate to a new page number.

Don’t

  • Don’t use the Pagination component to help users navigate through linear multi-step content like paged forms. In these cases, use a Progress Stepper (coming soon) or something that can communicate more about a user’s status through a flow than the Pagination component allows.
  • Don’t over-complicate Pagination labels with too much information about the content in view. If you can’t give succinct labels to Pagination, consider showing the information elsewhere on the page.

Released under the MIT License.