Pagination
Requests pages while announcing only controlled, accepted results.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Pagination pageIndex={0} pageCount={10} onPageChange={index => console.log(index)} />Variant matrix
Controlled pages
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Pagination.tsx- Tokens
--sheen-space-inline-xs--sheen-color-bg-selected--sheen-color-fg-muted
Accessibility
Role: navigation, statusKeyboard: Tab, Shift+Tab, Enter, SpaceDo
- Use within ThemeProvider for explicit locale and translated messages.
- Retain the accepted page during remote work and expose errors/retry in the owning region.
- Use Link for URL navigation; these controls request app-owned dataset changes.
Do not
- Do not announce requested pages before their results are accepted.
- Do not use pagination=false to mean infinite network fetching.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
pageIndex * | number | — | Zero-based accepted page. Empty results require zero. |
pageCount * | number | — | Nonnegative safe integer count; zero represents empty results. |
onPageChange * | (pageIndex: number) => void | — | Requests a new zero-based page; the app updates pageIndex only after acceptance. |
pending | boolean | false | Prevents further requests without removing keyboard focus or replacing accepted page text. |
disabled | boolean | false | Prevents requests without exposing a busy state, for example while retained rows belong to a different failed query. |
label | string | — | Navigation landmark name; defaults to the provider's pagination message. |