Current page
.pagination__btn--current + aria-current="page".
Previous, next, and numbered page controls for result sets.
Live
<nav class="pagination" aria-label="Results">
<ul class="pagination__list">
<li class="pagination__item">
<button type="button" class="pagination__btn pagination__btn--prev">Previous</button>
</li>
<li class="pagination__item">
<button type="button" class="pagination__btn pagination__btn--current"
aria-label="2" aria-current="page">2</button>
</li>
<li class="pagination__item">
<button type="button" class="pagination__btn pagination__btn--next">Next</button>
</li>
</ul>
</nav>import { Pagination } from 'caustica-design/core'
import 'caustica-design/css'
<Pagination
pageCount={5}
defaultPage={2}
aria-label="Results"
previousLabel="Previous"
nextLabel="Next"
onPageChange={setPage}
/>
.pagination__btn--current + aria-current="page".
.pagination__btn--prev / --next with host-owned labels.
Native disabled on prev at page 1 / next at last page.
Default numbered control with aria-label.
<nav> with a required accessible
aria-label (e.g. “Results”).
aria-current="page" on the active button.
aria-label (React sets the page number).
| Class | Description |
|---|---|
.pagination |
Nav landmark root. |
.pagination__list / __item |
Inline list structure. |
.pagination__btn |
Base page / edge button. |
.pagination__btn--current |
Active page (solid system blue). |
.pagination__btn--prev / --next |
Edge navigation controls. |
From src/core/Pagination.tsx — extends
HTMLAttributes<HTMLElement> (minus children /
onChange).
| Prop | Type | Default | Description |
|---|---|---|---|
pageCount |
number |
— | Total pages (1-based range). |
page / defaultPage |
number |
1 |
Controlled / uncontrolled current page. |
onPageChange |
(page: number) => void |
— | Fires when the page changes. |
aria-label |
string |
— | Required nav landmark name. |
previousLabel |
ReactNode |
— | Host-owned previous control label. |
nextLabel |
ReactNode |
— | Host-owned next control label. |