Pagination
Pagination
Usage
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Style
Default
Truncate
Navigation
Short
None
Far
Navigation Only
Navigation Only with text
Navigation Only Text and icon
Jump to page
Page of 5
Detail
With Detail
1 to 20 from 100
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.