Component

Pagination

Page controls with optional page-size selector, total label, and numbered page buttons.

Minimal

live editor — edit to update preview

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

With total label and page size

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(20);
  return (
    <Pagination
      page={page}
      totalPages={10}
      onPageChange={setPage}
      totalLabel="145 articles"
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
    />
  );
}
render(<Demo />);

Numbered page buttons

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(4);
  const [size, setSize] = useState(10);
  return (
    <Pagination
      page={page}
      totalPages={20}
      onPageChange={setPage}
      totalLabel="200 records"
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
      showPageNumbers
    />
  );
}
render(<Demo />);

Props

Prop	Type	Default	Description
page*	number	—	Current page (1-indexed).
totalPages*	number	—	Total number of pages.
onPageChange*	(page: number) => void	—	Called with the new page number.
totalLabel	string	—	Label shown on the left, e.g. "145 articles".
pageSize	number	—	Current page size. Renders a size selector when provided alongside onPageSizeChange.
onPageSizeChange	(size: number) => void	—	Called when the user changes items-per-page.
showPageNumbers	boolean	false	Show windowed numbered page buttons with ellipsis.
className	string	—	Additional class on the bar wrapper.