Pagination

Moves through a long list split into pages. Pass getHref for real links that work without JavaScript, or onChange for buttons inside an app.

Pagination

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Pagination

Dark theme, Pagination

High contrast theme, Pagination

UsageLink to the section Usage

tsx

import { Pagination } from '@skribly/ui/navigation'

tsx

<Pagination label="Pages" page={page} pageCount={24} onChange={setPage}
  previousLabel="Previous" nextLabel="Next"
  pageLabel={(n) => `Page ${n}`} statusLabel={(n, total) => `Page ${n} of ${total}`} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A named nav landmark.
Every page control has a name such as "Page 3", the current one has aria-current="page" and a filled style, and Previous and Next are disabled at the ends.
When its box is narrow the page numbers give way to a "Page 6 of 24" status and Previous and Next keep only their arrows, still named for screen readers.

This demo runs through axe in all three themes on every test run. See what the tests check.