Pagination

Basic Pagination

Long Pagination

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

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).

Conditional rendering

<Pagination> always renders its buttons, even when there's only one page. Render the component conditionally so it disappears when there's nothing to paginate, rather than showing a single disabled page button.

<>
  {totalPages > 1 && (
    <Pagination totalPages={totalPages} currentPage={page} onChange={setPage} />
  )}
</>

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).