Pagination
Interactive
See Pagination in Storybook for every variant, with live controls.
Page-by-page navigation for long lists and tables.
import { Pagination } from "@kairosis/eidos";
<Pagination page={page} pageCount={12} onChange={setPage} />;
Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | — | Required. 1-based |
pageCount | number | — | Required |
onChange | (page: number) => void | — |
Guidelines
- Shows the first page, the last page, and the current page ±1. Everything else collapses to an ellipsis, so the control stays a fixed width no matter how many pages there are.
- Prev/Next disable at the ends rather than wrapping around.
- The current page is marked with
aria-current="page"; every button has an accessible label ("Page 4"). - Page numbers are mono, so they don't shift width as they change.