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

Pagination

Overview Style Guidelines Code Demos Accessibility

Installation

Usage 

<rh-pagination>
  <ol>
    <li><a href="#1">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>

rh-pagination

Slots 3
Slot Name Description

An ordered list of links
go-to-page

"Go to page" text
out-of

"of" text
Attributes 6
DOM Property Description Type Default
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

Accessible label for the 'nav' element

 
string
 
'Page navigation'
labelFirst

Accessible label for the 'first page' button

 
string
 
'first page'
labelPrevious

Accessible label for the 'previous page' button

 
string
 
'previous page'
labelNext

Accessible label for the 'next page' button

 
string
 
'next page'
labelLast

Accessible label for the 'last page' button

 
string
 
'last page'
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 0

None

 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 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify