-1. **Top pagination:** Always right-align pagination in the top toolbar, above content views.
+1. **Top pagination:** Placed above the component it controls and right-aligned.
+
+2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want the bottom pagination to be sticky so it does not move out of view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML bottom sticky pagination](/components/pagination/html#bottom-sticky) examples for further implementation guidance.
-2. **Bottom pagination:** Right-align pagination below content views, too. If you want the bottom pagination to be sticky so it does not scroll off the page when the content is taller that the viewport, place the pagination in a footer page section and apply the `pf-m-sticky-bottom` modifier section to
-create a sticky page footer.
## Variations
-### Full pagination
-Use full pagination unless you're restricted to a narrow workspace, then use compact pagination. Full pagination occupies more toolbar territory, so you'll have limited room for other items like bulk selectors, buttons, filters, or input fields.
+- [Full pagination](#full-pagination)
+- [Compact pagination](#compact-pagination)
+- [Indeterminate pagination](#indeterminate-pagination)
+
+### Full pagination
-[Overflow menus](/components/toolbar/design-guidelines#overflow-menu) allow you to incorporate these toolbar actions using less horizontal space. Toolbar actions automatically form into an overflow menu at specific breaking points. Learn how to customize these breakpoints in our [Toolbar](/components/toolbar/design-guidelines) documentation.
+A default "full pagination" component contains multiple controls for navigating the related component. Use a full pagination unless you're restricted to a narrow workspace, in which can you should use a [compact pagination](#compact-pagination) instead.
-Desktop and mobile views connect with the same breakpoint specifications. On mobile, full pagination condenses to an item count. As a toolbar item, you can add and keep the item count in two ways: in both desktop and mobile views, or just in mobile view.
+When using full pagination a toolbar, you'll have limited room for other items like bulk selectors, buttons, filters, or input fields. You can still incorporate these additional actions with an [overflow menu](/components/toolbar/design-guidelines#overflow-menu), which will automatically form when those additional items need to collapse at specific breaking points. On mobile, full pagination will also collapse to a pagination summary with an item count. Learn how to customize overflow menu breakpoints in our [toolbar design guidelines](/components/toolbar/design-guidelines).
#### Desktop full pagination in toolbar
@@ -31,9 +34,9 @@ Desktop and mobile views connect with the same breakpoint specifications. On mob
-1. **Items in view:** Allows the user to select the item count (number of listed items) per page.
+1. **Displayed items selector:** Allows users to choose the number of items shown at once.
-2. **Full pager:** Supplies all necessary pagination options including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number.
+2. **Full pagination:** Supplies pagination controls, including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number.
#### Mobile full pagination in toolbar
@@ -41,13 +44,15 @@ Desktop and mobile views connect with the same breakpoint specifications. On mob
-1. **Items in view:** At this screen size, the top toolbar only shows the item count to indicate items currently in view. It hides all other pagination controls.
+1. **Pagination summary:** At this screen size, the top toolbar only shows the item count to summarize the number of items currently in view. It hides all other pagination controls.
-2. **Full pager:** Supplies the same pagination options as the desktop full pager, but in the bottom toolbar.
+2. **Full pagination:** Supplies pagination controls, including page-back, page-forward, and a displayed items selector, which allows users to choose the number of items shown at once.
+
+The default recommendation for using pagination in mobile views is to place a pagination summary above the component it controls and a full pagination below the component, as shown in this example. If you can't use bottom pagination, or if you can't use the fall pager in the bottom toolbar for some reason, only then you can place the full pagination in the top toolbar. **Do not** use a full pagination in both the top and bottom toolbars.
### Compact pagination
-Compact pagination fits more actions into top toolbars with limited space. Choose this compact variation when your top toolbar contains many items or looks overcrowded. As with full pagination, the compact variation condenses to an item count for mobile views.
+Compact pagination saves space for additional actions in limited spaces, like toolbars, and can help reduce visual crowding. Like with full pagination, compact pagination condenses to a pagination summary for mobile views.
#### Desktop compact pagination in toolbar
@@ -55,16 +60,14 @@ Compact pagination fits more actions into top toolbars with limited space. Choos
-1. **Items in view:** Allows the user to select the item count (number of listed items) per page, as seen in full pagination.
+1. **Displayed items selector:** Allows users to choose the number of items shown at once.
-2. **Compact pager:** Supplies the user with page-back and page-next controls only.
+2. **Compact pagination:** Supplies pagination controls, including page-back and page-next controls.
### Indeterminate pagination
-Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you may use “many” instead of the usual page count that would appear.
+Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you use “many” instead of a specific page count that would otherwise appear. Users can still select this control to choose the number of items shown at once.
-
-
-The text indicator provides the user with a control that displays indeterminate page count or items.
+
\ No newline at end of file
From 339402caab9d8fb5f1c4e6af57aafd5b2bb29c7f Mon Sep 17 00:00:00 2001
From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Date: Tue, 4 Nov 2025 17:02:44 -0500
Subject: [PATCH 2/2] Finalizes content to open pr.
---
.../pagination/img/compact-pagination.svg | 68 +--
.../pagination/img/full-pagination.svg | 56 +++
.../pagination/img/pagination-elements.svg | 406 ++++++++----------
.../components/pagination/pagination.md | 76 ++--
4 files changed, 305 insertions(+), 301 deletions(-)
create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.svg
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg
index 50bf6c9952..56c54be5f2 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg
@@ -1,35 +1,35 @@
-