Pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@tulipfarm/sprout/pagination";

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

Pagination is a nav labelled "pagination"; passaria-label to name it, such as "Run history pages".PaginationContent is a list and PaginationItem a list item. Which pages to show is your choice: the demo keeps the first, last, and nearby pages, and puts PaginationEllipsis in the gaps.

Links, sizes, and labels

<PaginationLink isActive render={<Link to="/inbox?page=2" />}>
  2
</PaginationLink>

<PaginationLink size="icon-sm" href="#">3</PaginationLink>
<PaginationPrevious size="sm" disabled={page === 1} href="#" />
<PaginationNext text="Older" aria-label="Older runs" href="#" />

PaginationLink is a Sprõut Button that renders ana. It is ghost, and outline witharia-current="page" when isActive is set. The Base UI render prop swaps the anchor for your router's link.size takes any button size: page numbers default toicon (32px), and previous and next default todefault. Pair icon-sm with sm oricon-lg with lg. disabled setsaria-disabled, removes the link from the tab order, and blocks clicks.

PaginationPrevious and PaginationNext show a chevron and a text label, "Previous" and "Next" by default. Below 640px only the chevron shows. Their names are "Go to previous page" and "Go to next page"; pass aria-label when you change the text.

Accessibility

Links show a focus ring and follow tab order. PaginationEllipsisis hidden from screen readers. Pair the control with a status line, such as "Page 3 of 24", so screen readers hear the change. Chevrons flip in right-to-left text. Color changes last 120ms and stop when reduced motion is requested.

Theme tokens

Page links use the button's --sprout-muted,--sprout-hover, and --sprout-text. The active page uses --sprout-input and --sprout-surface. The ellipsis uses --sprout-muted and the focus ring--sprout-focus.