Pagination

Pagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog

When to use

ComponentUse case
PaginationPagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.
Progress trackerProgress trackers provide the status of each step within a multistep process and give visibility on the length of the overall sequence.

Anatomy

The pagination component is comprised of the following elements:

Capacity

  1. Label per page: describes the content divided by page, such as rows, images, or results.
  2. Capacity control: select component that allows the user to determine the number of items per page. The default values are 10, 25, 50, 100, and 250, but can be customized.
  3. Range label: describes what range of items are in view up to the total.

Navigation
4. First page button: takes the user back to the first page.
5. Previous button: takes the user to the previous page.
6. Next button: takes the user to the next page.
7. Last page button: takes the user to the last page.
8. Location: text input showing what page the user is viewing, which can also be used for navigation.
9. Label of total pages: shows the number of pages based on the capacity of items per page.

Articles

Alternatives to pagination article

Read the Nielsen Norman Group's article on pagination.