Pagination ​

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

• 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 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.