Pagination

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.

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

While the default size works better in most contexts, the small size can be used for areas with more densely packed content. 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 pagination is used on mobile to ensure that users can access every page without page numbers

The box variant is the default and button backgrounds help users see the touch targets clearly. The open variant can be used for situations that require a more minimal design.

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.

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

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

The arrow icon color for disabled buttons in both variants is the same.

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

All of the pagination variants are horizontally centered below content by default.

As viewport sizes get smaller, pagination will switch sizes to accommodate the page input field if used on the right. All of the variants behave similarly. If the page input field is used below, pagination will not switch sizes as quickly. This works similarly for the box and open variants at both sizes.

Container widths greater than 768px

Container widths of 375px - 768px

Container widths less than 375px

When the page input field is not visible, the field will become visible when the default size switches to the mobile version. This works the same for the box and open variants.

Container widths greater than 768px

Container widths of 375px - 768px

The page input field needs to be visible when there is truncation or when only the navigation controls are available.

Do not omit the page input field when users do not have the ability to navigate to every page quickly.

Truncation occurs automatically when there are more than seven pages.

Do not truncate pagination if there are fewer than seven pages.

Use the built-in alignment options for the page input field. If your language is read right to left, view the “Right to left” pagination demo.

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

Use the default mobile style that comes with each variant.

Do not use the compact configuration in place of the default mobile style of another variant.