Skip to main content Red Hat Design System logo Contribute on Github

Pagination

Overview Style Guidelines Code Demos Accessibility

Usage

Use pagination to allow users to navigate through large amounts of data or content divided across multiple pages. Pagination should be used if there are 10 - 20 items in one view. However, the default number varies depending on context.

Other options

If you need to use a more simple pagination element within a table or toolbar, the PatternFly pagination component has a less prominent design.

Sizes

Use the Full size for all applications and the Compact size for when breakpoints get smaller. You must include the page input field according to these guidelines:

  • If there are more than seven pages
  • If the page amount is not known or cannot be determined
  • If using the Compact size
Image of pagination sizes and how to use them

Compact size

The page input field must always be visible if using the Compact size so that users can access every page.

Image of compact size paginations with page input field on the right and below

Page input field orientation

The page input field can be oriented on the right or below pagination. If used below, it is horizontally centered by default.

Image of two full size paginations; one has a page input field on the right and the other has one below Image of full size and compact size pagination; one has a page input field on the right and the other has one below

Behavior

Page input field

The page input field allows users to type their desired page number, this helps avoid clicking the control buttons too much. Users can press the Enter key to jump to that page.

Warning

If there are more than seven pages, the page input field must be visible.

Image of two groups of pagination; one group shows full sizes with different page locations and the other group shows compact sizes with different page locations

Low page count

In some edge cases, pagination may need to display a very low page count like one.

Helpful tip

Pagination will not be displayed if a search returns zero results or if there is no data or content to list.

Image of groups of paginations with low page counts; first pagination group shows only 1 page and the second group shows only 3 pages

Disabled butons

When the beginning or end of the pagination range is reached, certain control buttons are disabled.

Image of paginations with a variety of disabled control buttons

Truncation

If there are more than seven pages, single or double truncation is displayed based on your location.

Helpful tip

Truncation does not apply to the Compact size because it does not display page numbers.

Image of paginations with a variety of truncation examples

Layout

Alignment

Both pagination sizes and orientations are horizontally centered below content by default.

Image of full size pagination with the page input field on the right Image of compact size pagination with the page input field on the right Image of full size pagination with the page input field below Image of compact size pagination with the page input field below

Responsive design

With page input field

As breakpoints get smaller, pagination will switch sizes to accommodate the page input field if used on the right.

Images of pagination with the page input field on the right

If the page input field is used below, pagination will not switch sizes as quickly.

Images of pagination with the page input field below

Without page input field

When the page input field is not visible, it will become visible when the Full size switches to the Compact size.

Image of pagination without page input field

Best practices

Compact size

Do not use the Compact size without including the page input field.

Image of compact size pagination with no page input field is incorrect usage

No input field

The page input field needs to be visible if there is truncation.

Image of pagination with truncation but no page input field is incorrect usage

Truncation

Do not truncate pagination if there is less than seven pages.

Image of pagination that is truncating only four pages is incorrect usage

Order or alignment

Do not change the order or alignment of the page input field.

Image of paginations with page input fields; one group shows incorrect order and the other group shows incorrect alignment
© 2021-2024 Red Hat, Inc. Deploys by Netlify