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

Pagination

Overview Style Guidelines Code Accessibility

Overview

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

Image of two paginations; one is full size showing double truncation and a page input field and the other one is compact size showing only a page field input.

Sample element

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

Demo

View a live version of this element to see how it can be customized.

<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>

Full screen demo

When to use

  • When you need to divide large quantities of data or content into chunks
  • When you need to enable users to navigate to through pages or locate a specific page number
  • When you need to improve the loading performance of a system
Property Status Meaning
Figma library Ready Component is available in the Figma library
Responsive Ready Component responds to changing viewport sizes in Figma and the browser
RH Elements Ready Component is available as a web component
webRH Ready Component is available as a web component
© 2021-2024 Red Hat, Inc. Deploys by Netlify