Pagination

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

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.