Pagination

Basic Pagination

<Pagination totalPages={5} currentPage={1} onChange={page => /* update state */} />
<Pagination totalPages={5} currentPage={1} onChange={page => /* update state */} />

Long Pagination

When totalPages exceeds displayPages (default 9), the component will wrap.

<Pagination totalPages={20} />
<Pagination totalPages={20} />

Custom length

The number of page buttons can be customized with the displayPages prop.

The default number of displayed pages is 9, the minimum is 7.

To make the active page in a long pagination centered, the displayPages prop should be an odd number (any even number will be rounded up to an odd number).

<Pagination totalPages={20} displayPages={7} />
<Pagination totalPages={20} displayPages={7} />

Responsive

The pagination will be rendered in different modes based on its container size.

Maximum displayPages will be capped to 9 for medium containers (under 960px) and ignored for small (under 600px).

<Pagination totalPages={20} displayPages={13} />
<Pagination totalPages={20} displayPages={13} />

Sandbox

import { useState } from "react";
import Pagination from "@intility/bifrost-react/Pagination";

export default function () {
  const [page, setPage] = useState(10);

  return (
    <div className="bf-page-padding">
      <Pagination totalPages={20} currentPage={page} onChange={setPage} />
    </div>
  );
}