LLabanaat

Pagination

Page navigation with a nav landmark and aria-current="page" on the active page. Fully controlled.

function Demo() {
const [page, setPage] = useState(1);
return <Pagination page={page} totalPages={8} onPageChange={setPage} />;
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Installation

import { Pagination } from "@labanaat/ui/pagination";

Props

PropTypeDefaultDescription
pagenumberCurrent page (controlled)
totalPagesnumberTotal number of pages
onPageChange(page: number) => voidCalled when a page is selected
siblingCountnumber1Sibling pages shown on each side of the current page