Pagination

Page navigation with numbered links and previous/next buttons. Composable sub-components let you build simple or complex page navigators.

Use cases

Data tables — navigate large result sets.
Search results — step through paginated search responses.
Content feeds — browse articles, blog posts, or records.

When NOT to use

For infinite scroll — use a "Load more" button or intersection observer.
For tab switching — use Tabs.
For step-by-step flows — use a Stepper.

Import

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '@mihcm/ui/Pagination';

Basic usage

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious onClick={() => setPage(page - 1)} />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink>3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext onClick={() => setPage(page + 1)} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With ellipsis

When there are many pages, use PaginationEllipsis to collapse the middle range.

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious /></PaginationItem>
    <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>4</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink isActive>5</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>6</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>20</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext /></PaginationItem>
  </PaginationContent>
</Pagination>

Composition

Use PaginationEllipsis to collapse large page ranges. Show the first, last, and 2 pages around the current page.
isActive on PaginationLink sets the visual highlight and aria-current="page".
Disable PaginationPrevious on page 1 and PaginationNext on the last page.

DataTable — table with built-in pagination.
Button — for "Load more" patterns instead of pagination.