Pagination

Previous/next arrows around a five-page window, with a marker that glides to the current page and numbers that slide as the window shifts.

When to use

• Long, ordered collections where people need to know where they are: matching firms, search results, documents.
• When page boundaries are meaningful or shareable (page 6 of 21).
• Use infinite scroll or a "Load more" button for casual feeds, and Carousel for a handful of visual slides.

Usage

import { Pagination } from "@/components/iris/pagination/pagination";

const [page, setPage] = useState(1);
h(Pagination, { page, pageCount: 21, onPageChange: setPage, label: "Matching firms" });

Props

Prop	Type	Default	Description
page	number	— (required)	Current page, 1-based. Clamped to 1…pageCount.
pageCount	number	— (required)	Total pages. 0 renders an empty nav.
onPageChange	(page: number) => void	— (required)	Called with the requested page. Always controlled.
label	string	"Pagination"	Accessible name of the nav landmark.

Notes

• Renders nav with plain buttons; the current page has aria-current="page", arrows are labelled "Previous page" / "Next page" and disable at the ends.
• Shows at most five numbers, centred on the current page where possible; there are no first/last or ellipsis buttons, so pair it with a "Showing 101–120 of 412 firms" line for large sets.
• Reduced motion turns off the sliding numbers and the gliding marker.
• Uses the theme's surface, line, shadow-resting, rounded-button and size-control-sm.