Pagination

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-pagination/rh-pagination.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-pagination/rh-pagination.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.9/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.13/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>
Copy to Clipboard Wrap lines

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-pagination/rh-pagination-lightdom.css">

Usage

<rh-pagination>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">

<script type="module">
  import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>
Copy to Clipboard Wrap lines

rh-pagination

A paginator allows users to navigate between pages of related content.

Slots 3
Slot Name Description

An ordered list of links
go-to-page

"Go to page" text, defaults to "Page"
out-of

"of" text
Attributes 8
Attribute DOM Property Description Type Default
overflow overflow

Override overflow values set from HTML or JS. overflow should ideally be private, but because we can't do ::slotted(nav ol li), we need to reflect it to a host attribute, so that lightdom CSS can target the list items.

 
'start' | 'end' | 'both' | null
 
null
label label

Accessible label for the 'nav' element

 
string
 
'Page navigation'
label-first labelFirst

Accessible label for the 'first page' button

 
string
 
'first page'
label-previous labelPrevious

Accessible label for the 'previous page' button

 
string
 
'previous page'
label-next labelNext

Accessible label for the 'next page' button

 
string
 
'next page'
label-last labelLast

Accessible label for the 'last page' button

 
string
 
'last page'
size size

Change pagination size to small

 
'sm' | null
 
null
variant variant

"Open" variant

 
'open' | null | undefined
 
null
Methods 5
Method Name Description
first()

Navigate to the first page
prev()

Navigate to the previous page
next()

Navigate to the next page
last()

Navigate to the last page
go(page: 'first' | 'prev' | 'next' | 'last' | number)

Navigate to a specific page
Events 0
None
CSS Shadow Parts 4
Part Name Description
container

pagination container
numeric-middle

container for the numeric control at medium screen widths
numeric-end

container for the numeric control at small and large screen widths
numeric

shared container for the numeric controls at all widths
CSS Custom Properties 3
CSS Property Description Default
--rh-pagination-accent-color

Sets the outline color when the page input has focus.

 var(--rh-color-interactive-blue, #0066cc)
--rh-pagination-background-focused

Sets the disabled stepper color.

 var(--rh-color-gray-20, #c7c7c7)
--rh-pagination-stepper-color

Sets the stepper color.

 var(--rh-color-icon-subtle, #707070)
Design Tokens 37
Token Copy
--rh-border-radius-default
--rh-border-width-lg
--rh-border-width-md
--rh-border-width-sm
--rh-color-border-interactive
--rh-color-border-subtle
--rh-color-border-subtle-on-light
--rh-color-gray-30
--rh-color-gray-40
--rh-color-gray-50
--rh-color-gray-60
--rh-color-interactive-primary-default
--rh-color-interactive-primary-hover
--rh-color-interactive-primary-visited-default
--rh-color-interactive-primary-visited-hover
--rh-color-red-40
--rh-color-red-60
--rh-color-surface-dark-alt
--rh-color-surface-darkest
--rh-color-surface-lighter
--rh-color-surface-lightest
--rh-color-text-primary
--rh-color-text-primary-on-dark
--rh-color-text-secondary-on-dark
--rh-font-family-heading
--rh-font-size-body-text-lg
--rh-font-size-body-text-md
--rh-font-size-body-text-xl
--rh-font-size-heading-xs
--rh-length-2xl
--rh-length-3xl
--rh-length-4xl
--rh-space-2xl
--rh-space-lg
--rh-space-md
--rh-space-sm
--rh-space-xs
Edit this page on GitHub