HPE
Design System
Foundation
Components
Templates
Extend
Components

Pagination

Pagination divides content into separate pages in order to enhance navigation to specific items.

  • …
Open in Figma
Open docs

When to use

Use pagination when a user’s goal is to find a specific item rather than to peruse the full set of data. By breaking the data up into smaller, consistently sized groups, the user is more easily able to jump to specific sections of the data.

If you expect the user will be scrolling and perusing large amounts of the data set, consider using Infinite Scroll.

Pagination is particularly effective for displaying large sets of results in components such as Table, List, and Cards.

Guidelines

Number of results per page

By default, 20 results should show at once. The examples on this page have been modified to show less results per page so that the pagination control is viewable in the single screen.

If the user has performed a search resulting in less than 20 results, the pagination component should no longer be displayed.

Placement of pagination component

The pagination component should be placed underneath and justified to the end of the content it is paginating.

Showing summary of results

It may be beneficial to provide users with a summary of what range of results they are viewing. This should take the format of "Showing 1-20 of 1000" and should be aligned in a row with the pagination component.

The results summary should be justified to the start of the row and the pagination component should remain justified to the end of the row.

Accessibility

Below are some accessibility requirements that ensure pagination is accessible for screen readers and keyboard navigation.

If your team is developing with Grommet, these considerations are already handled, so no further action is required from your team.

  1. Wrap pagination links in a <nav> element.
  2. Provide an aria-label="pagination navigaton" and role="navigation".
  3. Individual page buttons should have an aria-label that reads "Go to page X", where X is the page that will be navigated to upon selection.
  4. The active page button should have aria-current="true".
  5. The next/previous arrow buttons should have aria-label that reads "Go to next page" and "Go to previous page", respectively.

For more detailed documentation on these requirements, you can read more about accessible pagination.

Variants

In addition to Table and List, here is another way pagination can be implemented.

Paginated Table

Tables often contain large amounts of data. To improve the efficiency that a user can navigate to a specific item or range of items, use pagination.

HPE Design System Paginated Table Example
See Paginated Table

Paginated List

Lists often contain large amounts of data. To improve the efficiency that a user can navigate to a specific item or range of items, use pagination.

HPE Design System Paginated List Example
See Paginated List

Paginated Cards

entry-1
entry-2
entry-3
entry-4
entry-5
entry-6
entry-7
entry-8
entry-9
entry-10
Showing 1 - 10 of 95
  • …
Open docs

Related

Related content you may find useful when using Pagination.

HPE Tables Preview
Components
Table
Table presents data in a column and row format.
HPE Lists Preview
Templates
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Cards Preview
Components
Card
A container providing at-a-glance information and easy access to more details.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page