Pagination
We paginate pages that display large data sets to our users. This helps reduce page load time and makes the data easier to navigate.
Pagination is commonly seen on tool landing pages, where we display 150 objects or table rows per page.
Pagination is commonly seen on tool landing pages, where we display 150 objects or table rows per page.
Demo and Developer GuidelinesAnatomy
Page Picker
The page picker has a label with the capitalized word “Page:”. Next to it is a dropdown, where the selected page is the number of the active page. Options in the dropdown are the numbers of the other available pages, which takes the user to that page when clicked.
Types
Single Page
Use the single page pagination component on pages that have the potential of needing to be paginated, but the number of items does not exceed the maximum amount of items yet.
Multiple Page
Use a multiple page pagination component on pages with a number of items that exceed the maximum amount of items for that page.
Placement
Place the pagination component in both the top-right and bottom-right of the data set that is being paginated. This makes navigation between pages accessible from either the top or bottom of the paginated data.
Behavior
The container for the dropdown button appears on hover.
If there are more pages than can be displayed in the max height of the pagination menu, the last page displays in a sticky footer.
Specifications
Padding
Styling
