Page Controls

Pagination renders the page controls for a paged collection: previous and next buttons, numbered page links, an active page, and an ellipsis for gaps. It is composed from small, accessible parts so you control the markup and wire the links to your own routing or state. This is the same component documented under navigation / pagination; this page frames it as the page-control pattern.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: pagination.tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@beacon/design-system";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Parts

Part	Role
Pagination	The nav landmark labelled “pagination” that wraps the controls.
PaginationContent	The ul row holding the items.
PaginationItem	A single li wrapper for one control.
PaginationLink	A page link. Accepts isActive to mark the current page and size (forwarded to the button styling).
PaginationPrevious	A pre-built link to the previous page with a chevron and label.
PaginationNext	A pre-built link to the next page with a label and chevron.
PaginationEllipsis	A non-interactive gap indicator for skipped pages.

When to use

• Stepping through pages of a list, table, or search results.
• Any place a user needs to jump to a specific page or move one page at a time.

Do not use page controls for endless feeds where infinite scroll fits better, and do not use them to switch between sibling views: use tab bars for that.