Moves between pages of a long list. Previous and Next are 44px; narrow screens show "Page 3 of 12". With onLoadMore it is a Load more button instead.
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Default, code
function Buttons({ start = 5, count = 12 }: { start?: number; count?: number }) {
const [page, setPage] = useState(start);
return <Pagination page={page} pageCount={count} onPageChange={setPage} />;
}
<Buttons />Showing 20 of 48
Load more, code
function More() {
const [page, setPage] = useState(1);
return <Pagination page={page} pageCount={3} onLoadMore={() => setPage((p) => p + 1)} shownCount={Math.min(page * 20, 48)} totalCount={48} />;
}
<More />Links, code
<Pagination page={5} pageCount={12} getHref={(p) => `#page-${p}`} />First page, code
function Buttons({ start = 5, count = 12 }: { start?: number; count?: number }) {
const [page, setPage] = useState(start);
return <Pagination page={page} pageCount={count} onPageChange={setPage} />;
}
<Buttons start={1} />Few pages, code
function Buttons({ start = 5, count = 12 }: { start?: number; count?: number }) {
const [page, setPage] = useState(start);
return <Pagination page={page} pageCount={count} onPageChange={setPage} />;
}
<Buttons start={2} count={4} />The 12 design tokens Pagination reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| color.text.on-primary | … | --sd-color-text-on-primary |
| color.text.secondary | … | --sd-color-text-secondary |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| target.min | … | --sd-target-min |
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Pagination, pageSlots } from "@superduperui/react"Pagination also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
pagerequired | number | Current page, 1-based. |
pageCountrequired | number | Number of pages. |
getHref | (page: number) => string | Link mode: the URL of a page. Pages are links (best for lists people share or bookmark). |
onPageChange | (page: number) => void | Button mode: called with the chosen page. |
onLoadMore | () => void | Load more mode: called by a Load more button that replaces the page numbers, for lists that grow in place (feeds, search results). `page` is the pages loaded so far; the button goes once page reaches pageCount. After loading, move focus to the first new item. |
shownCount | number | Load more mode: items shown so far, for the polite "Showing 20 of 60" status. |
totalCount | number | Load more mode: items in all. |
isLoadingMore | boolean | Load more mode: the next page is loading (the button is busy and shows a spinner). |
siblings | numberDefault 1 | Pages shown either side of the current one. Default 1. |
aria-label | stringDefault 'Pagination' | Names the navigation landmark. Default "Pagination". |
className | string |
Screen readers announce "Pagination, navigation" then "Page 5, current page, button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
Shared patterns it ships with: 2.4.8 (aria-current="page" on the current page).
| axe-core (WCAG A, AA, AAA and best practice) | 120 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 380 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 120 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 126 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches Previous |
| Tab | Tab reaches the first page |
| Shift+Tab | Back to Previous |
| Enter | Enter goes to the previous page; it becomes current |
The Figma component is Pagination, with Mode (Buttons, Links); Layout (Wide, Narrow, Load more). The Figma library isn’t published yet.
Figma to code: Mode (Buttons = onPageChange, Links = getHref); Page → page; Page count → pageCount; Layout (Wide, Narrow, Load more = onLoadMore); Shown → shownCount when Layout=Load more; Total → totalCount when Layout=Load more; nested Previous → (page - 1); nested Next → (page + 1).