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
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Pagination was previously named “Standard Pagination” and was featured in the “Pagination” section of DDS v1. This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements.

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.