Pagination

<Pagination page={page} pageCount={12} onPageChange={setPage} />

Pagination is fully controlled: it renders the window of page numbers around page, with ellipses where the run is broken, and calls onPageChange. It never owns the page itself, because the page almost always lives in the URL.

Usage

import { Pagination } from "@heyo-sh/heyo-ui";<Pagination page={page} pageCount={12} onPageChange={setPage} />;

Siblings

siblings is how many numbers sit on each side of the current page. Two is right for a wide table; one keeps the control narrow enough for a card footer.

<Pagination siblings={1} page={page} pageCount={20} onPageChange={setPage} /><Pagination siblings={3} page={page} pageCount={20} onPageChange={setPage} />

Compact

compact drops the numbers and keeps a previous/next pair with a counter between them. It is the right control under a narrow list, and on a phone.

<Pagination compact page={page} pageCount={12} onPageChange={setPage} />

Properties