Pagination

Status: stableAccessibility reviewedtenet-ui@0.4.0

import { Pagination } from 'tenet-ui';

Source: src/components/Pagination/Pagination.tsx

Usage guidelines

When to use: moving through a large result set split into pages (a table, search results). For infinite streams prefer “load more”; for hierarchy use Breadcrumbs.

Rules

It’s controlled: pass page (1-based) + pageCount and handle onPageChange. Keep page in sync with your data fetch.
Every control is a real <button>, so it’s keyboard-operable; the current page is marked aria-current="page" and Previous/Next disable at the ends. Don’t reimplement with click-only <span>s.
Long ranges collapse with ellipses around siblingCount pages — tune siblingCount, don’t render 42 buttons.
It’s wrapped in a <nav aria-label>; give a distinct label if more than one nav is on the page.

Do / Don’t

✅ <Pagination page={page} pageCount={total} onPageChange={setPage} />
❌ Rendering all pages with no ellipsis for large counts.
❌ Click-only page numbers with no aria-current and no keyboard support.

Examples

2 stories for Pagination — open in Storybook

Default components-pagination--default
Many Pages components-pagination--many-pages

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`page` *	`number`	—	Current page (1-based).
`pageCount` *	`number`	—	Total number of pages.
`onPageChange` *	`(page: number) => void`	—	Called with the requested page when the user navigates.
`siblingCount`	`number`	`1`	How many page numbers to show around the current page.
`aria-label`	`string`	`Pagination`	Accessible name for the nav landmark.
`className`	`string`	—

* required