Pagination

Pagination provides accessible page navigation for controlled collections.

Try it

Usage

RuiPagination renders previous, numbered, and next controls by default. Listen for rui-page-change and update the controlled page prop from your data layer.

import { RuiPagination } from '@ecopages/radiant-ui/pagination';
 
<RuiPagination
  label="Search result pages"
  page={page}
  pageCount={pageCount}
  on:rui-page-change={(event) => setPage(event.detail.page)}
/>Copy

Pass children to replace the default navigation chrome while keeping the rui-pagination event contract.

Below 40rem, or with class="rui-pagination--compact", the default chrome collapses to icon-only previous / next controls around a Page n of m position.

The default chrome copy is English. Pass the label view props to localize it:

<RuiPagination
  label="Seiten"
  page={page}
  pageCount={pageCount}
  previousText="Zurück"
  previousLabel="Vorherige Seite"
  nextText="Weiter"
  nextLabel="Nächste Seite"
  pageLabel={(page) => `Seite ${page}`}
  statusLabel={(page, pageCount) => `Seite ${page} von ${pageCount}`}
/>Copy

Custom markup

<rui-pagination> coordinates any light-DOM tree that matches its query contract. The Rui* helpers stamp these targets; they are not required.

import '@ecopages/radiant-ui/pagination';
 
<rui-pagination page={2} page-count={5} label="Search result pages">
  <nav class="rui-pagination__nav" aria-label="Search result pages">
    <button type="button" class="rui-pagination__link" data-pagination-page={1}>
      Previous
    </button>
    <button type="button" class="rui-pagination__link" data-pagination-page={2} aria-current="page">
      2
    </button>
    <button type="button" class="rui-pagination__link" data-pagination-page={3}>
      Next
    </button>
  </nav>
</rui-pagination>Copy

BEM classes are presentation-only. Each navigable control needs data-pagination-page with a one-based page number.

Theming

API

RuiPagination wraps <rui-pagination> and supplies default navigation controls.

Attributes (<rui-pagination>)

JSX view props

These props configure the default RuiPaginationNav chrome rendered by RuiPagination (and accepted by RuiPaginationNav directly). They are not custom-element attributes.

Light-DOM contract

Nested hosts: none.

Events

View helpers

CSS classes