Pagination is used for displaying a limited number of results on search engine results pages. Pagination is used in some form in almost every web application to divide returned data and display it on multiple pages.
- Active state: Use a filled button to indicate what page the user is on.
- Hover state: Use a hover state to show that the user can select another page.
- Truncate: When you have a large amount of pages within a pagination, truncate your numbers with the option to navigate further ahead.
- Arrow Icon Use arrow icons for the user to switch to the next page.
Use the default pagination when you need a simple pagination pattern for a page that will not change size.
Pagination includes several mechanisms to move between pages:
- Left arrow:
- Navigates backward one page
- Disabled when the first page is selected
- Numbers: redirects directly to a certain dataset chunk (page) calculated with the page size
- Appears when the number of pages exceeds six
- Displays a dropdown menu with the rest of the pages
- It is always shown in a middle position
- Right arrow:
- Navigates forward one page
- Disabled when the last page is selected
A pagination bar is pagination with the following features:
- A page size selector placed on the left side of the bar
- A label on the right side of the page size selector that displays the exact chunk of information displayed from the dataset
- Classic pagination on the right side of the bar that adapts to the number of pages Use the pagination bar when you need a complex pagination pattern that requires changing the page size and re-calculating the number of pages.