Cognition

Components

Pagination

Page navigation with next and previous links. Use it to split long lists or results into pages: the current page is marked active, and an ellipsis stands in for skipped ranges.

Preview

Rendered with live Cognition tokens: it composes the Button ghost and outline variants, so it remaps on theme change with no dark: classes. Click a page or the Previous / Next links.

Variants

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
<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>

The simplest form is a row of page numbers. Add PaginationPrevious / PaginationNext for stepping and a PaginationEllipsis to collapse long ranges.

States

<PaginationLink href="#" isActive>2</PaginationLink>   {/* current page */}
<PaginationLink href="#">3</PaginationLink>           {/* inactive */}
<PaginationPrevious                                   {/* disabled at the start */}
  href="#"
  aria-disabled
  className="pointer-events-none opacity-50"
/>

The active page uses the outline variant and aria-current="page"; the rest are ghost links. At the first or last page, disable the matching step link with aria-disabled + pointer-events-none opacity-50.

API

Part
Description
Pagination
Root <nav aria-label="pagination">, centered. Wraps the list.
PaginationContent
The <ul> row of items.
PaginationItem
A single <li>: wraps a link, previous/next, or the ellipsis.
PaginationLink
A page link. isActive renders the outline variant + aria-current; size defaults to icon.
PaginationPrevious / PaginationNext
Labelled links with a chevron. Use the default size so the label fits.
PaginationEllipsis
Decorative gap indicator for skipped pages (aria-hidden, with sr-only text).

Don't and Do

Don't

Don't render every page number for a long list: collapse the middle with an ellipsis. And don't leave Previous / Next live at the ends; disable the one that has nowhere to go so it doesn't mislead.

Do
<PaginationItem>
  <PaginationLink href="#" isActive>
    2
  </PaginationLink>
</PaginationItem>
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

export function Pager() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}
API matches fe-distillery/components/ui/pagination.tsx Pagination and its Content / Item / Link / Previous / Next / Ellipsis parts. It composes the Button ghost and outline variants, so it inherits Cognition tokens with no extra mapping.