Pagination

A Pagination enables the user to select a specific page from a range of pages.

Uncontrolled Value

By default, the Pagination component handles its value uncontrolled. In the uncontrolled variant you can pass in a defaultValue prop to pre-select a page. The maxValue prop defines how many total pages the pagination should display.

<Pagination defaultValue={2} maxValue={20} />

<Pagination defaultValue={2} maxValue={20} />

<Pagination
  defaultValue={2}
  maxValue={20}
/>

Controlled Value

You can also handle the value of the component in a controlled manner. To do so, you can pass in a value prop as well as an onChange handler.

function Example() {
  const [page, setPage] = useState(3);

  return (
    <Pagination value={page} onChange={setPage} maxValue={20} />
  );
}

function Example() {
  const [page, setPage] = useState(3);

  return (
    <Pagination
      value={page}
      onChange={setPage}
      maxValue={20}
    />
  );
}

function Example() {
  const [page, setPage] =
    useState(3);

  return (
    <Pagination
      value={page}
      onChange={setPage}
      maxValue={20}
    />
  );
}

API