Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Pagination Since v1.0.0

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleVariantsSizesColor schemeConfigurationSpaceInteraction statesStyleVariantsSizesColor schemeConfigurationSpaceInteraction states

Style

Pagination is a horizontal row of square containers that include a control button or page number in the middle. A maximum of seven pages can be displayed before truncation and the appearance of the page input field. The page input field includes a text label, field, and link to the last page. Pagination with truncation must include a page input field so users can access hidden pages.

Anatomy

Pagination anatomy with lots of annotations
  1. First page
  2. Previous page
  3. Inactive page
  4. Active page
  5. Next page
  6. Last page
  7. Navigation controls
  8. Truncation
  9. Page input field
  10. Page numbers

Variants

Box variant

The box variant shows a background color for each page number and navigation control. When a page is active, a blue border appears at the top of the button.

Truncated pagination with 50 pages and an input on the right hand side.

Open variant

The open variant has transparent backgrounds for all buttons. The active state for a page number shows a blue border on the bottom.

Truncated pagination with 50 pages and an input on the right hand side. This version is borderless where there is no background color to denote a box to click on.

Sizes

There are two available sizes: Default and Small.

Default

The default pagination button size is -rh-size-icon-04.

A truncated pagination with 50 pages and an input below the pagination.

Small

The small pagination button size is --rh-size-icon-03. The page input field size does not change.

A small sized truncated pagination with 50 pages and an input to the right of the pagination.

Color scheme

Pagination is available in both light and dark themes. Additionally, because the box variant has a light gray background color that can also be used for surfaces, the button background colors will change based on the container surface color.

Light scheme

The box variant button background color changes against --rh-color-surface-lighter only. However, the open variant colors do not change.

Lightest

Lightest scheme pagination, white background Lightest scheme pagination open variant, white background

Lighter

Lighter scheme pagination with a light gray background Lighter scheme pagination open variant with a light gray background

Light

Light scheme pagination with a gray background Light scheme pagination open variant with a gray background

Dark scheme

The box variant button background color changes against --rh-color-surface-darker only. However, the open variant colors do not change.

Darkest

Darkest scheme pagination, near black background Darkest scheme pagination open variant, near black background

Darker

Darker scheme pagination, slightly lighter dark gray background Darker scheme pagination open variant, slightly lighter dark gray background

Dark

Dark scheme pagination with a dark muted gray background Dark scheme pagination open variant with a dark muted gray background

Configuration

The page input field can be horizontally or vertically centered with pagination.

Pagination construction showing horizontal and vertical alignment

The width of page number buttons, navigation control buttons, and truncation stays the same.

Pagination construction showing button widths for normal and size SM versions.

Compact Configuration

Compact pagination omits the page numbers and moves the page input field between the navigation controls. This should be used occasionally and only in layouts with very little space for a pagination element.

Helpful tip

If you have enough space, the mobile version, which has the full page input field to the right or below, is preferred.

The compact configuration comes in both the box and borderless variant styles. It's also available in the default and small sizes.

Four paginations. All compact. Two normal sized and two small sized. Box and borderless. Same as above but dark color palette.

Active page

Styles for the active page are different from inactive pages so users can see their location. In the box and borderless variants, active pages show a blue border either at the top or bottom. Active page styles do not apply to control buttons because they are not page numbers.

Helpful tip

Active page styles are not visible in the compact configuration because there are no page numbers.

The examples below show active page styles for page 4.

Two light theme paginations; both are showing an active page of 4. Normal and borderless variants. Two dark theme paginations; both are showing an active page of 4. Normal and borderless variants.

Space

Space values are the same for both sizes, both variants, and on all viewport sizes.

Pagination spacing for both sizes and variants.

Spacing between buttons and the page input field stays the same, whether the input field is to the right or below.

Pagination spacing between the numbers and input field.

The compact configuration maintains the 2px spacing between the navigation controls, and the spacing for the page input field remains the same as well. There is a large space (var(--rh-space-lg, 16px)) on either side of the page input field.

Pagination spacing for the compact version with stepper buttons and input in the middle.

Interaction states

Interactive elements include control and inactive page buttons, the page input field, and last page link.

Hover

Control and inactive page number buttons have the same hover state. Truncation is not interactive so it has no hover state.

Light theme pagination hover states Dark theme pagination hover states

Focus

Light theme pagination focus states Dark theme pagination focus states

Active

Light theme pagination active states Dark theme pagination active states
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify