navigation · @awesome-ds/react
Pagination
Paged navigation with live page announcement.
State matrix
first
middle
last
Anatomy
- labelled navigation
- previous control
- page status
- next control
- live announcement
Keyboard contract
Controls use native activation and become disabled at range boundaries.
Screen-reader contract
Current page and total are announced; disabled boundaries are exposed.
Content rules
- Use stable page nouns.
- Preserve filters and URL state across pages.
Public API
| Prop | Type | required | Description |
|---|---|---|---|
page | number | required | Current one-based page |
pageCount | number | required | Total pages |
onChange | (page: number) => void | required | Page request |
ariaLabel | string | — | Localized navigation name |
previousLabel | string | — | Localized previous-page action |
nextLabel | string | — | Localized next-page action |
formatPageStatus | (page: number, pageCount: number) => string | — | Locale-aware page announcement |
Adaptation contracts
- RTL
- Follow document direction for directional keys and visuals while preserving semantic order.
- High contrast
- Current, selected, expanded, and focus states remain distinct without fill alone.
- Reduced motion
- Move selection and disclosure state without animated travel.
Verification IDs
Live
Live
Copyable example
import { Pagination } from "@awesome-ds/react";
<Pagination page={2} pageCount={5} onChange={() => {}} />