Pagination

Pagination with page navigation, next and previous links.

tsx

1
2
3
4
5
6
7
8
9
10<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>

Pagination is the page navigation for a list. Only one PaginationLink carries isActive. PaginationPrevious/Next and PaginationEllipsis cover the ends and the gaps.

Shorthand: <Pagination page={2} total={5} /> renders Previous, the numbered links 1 to total with page active, and Next. The links it generates all point to #, so use the composed form when you need real hrefs.

Installation

Terminal

$ bext ui add pagination

Copy and paste the following into src/components/ui/pagination.tsx.

pagination.tsx

1
2
3
4
5
6
7
8
9
10<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>

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from "@bext-stack/ui/primitives"

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

// Shorthand: Previous, 1..5 with 2 active, Next (all links point to "#")
<Pagination page={2} total={5} />

Anatomy

<Pagination>
  └── <PaginationContent>              // <ul>
      ├── <PaginationItem><PaginationPrevious href="?p=1" /></PaginationItem>
      ├── <PaginationItem><PaginationLink isActive href="?p=2">2</PaginationLink></PaginationItem>
      ├── <PaginationItem><PaginationEllipsis /></PaginationItem>
      └── <PaginationItem><PaginationNext href="?p=3" /></PaginationItem>

API Reference

Pagination

Prop	Type	Default	Description
children	ReactNode	—	Composed form: a PaginationContent. Rendered inside <nav role="navigation" aria-label="Pagination">.
ariaLabel	string	"Pagination"	aria-label of the <nav>. Change it when a page has two paginations.
page	number	—	Shorthand: the active page. Used only together with total.
total	number	—	Shorthand: number of pages. Generates Previous, links 1..total and Next.
className	string	—	Extra classes on the <nav>.

PaginationContent

Prop	Type	Default	Description
children	ReactNode	—	The PaginationItems. Rendered as a <ul> (flex row, gap-1).

PaginationItem

Prop	Type	Default	Description
children	ReactNode	—	One link, Previous, Next or ellipsis. Rendered as an <li>.

PaginationLink

Prop	Type	Default	Description
href	string	"#"	Target of the page link.
isActive	boolean	false	Sets aria-current="page" and the outline button style (ghost otherwise).
children	ReactNode	—	Page number. The link is a fixed 36px square (h-9 w-9).
className	string	—	Extra classes on the <a>.

PaginationPrevious / PaginationNext

Prop	Type	Default	Description
href	string	"#"	Target of the link. The text ("Previous" / "Next") and the aria-label ("Go to previous page" / "Go to next page") are fixed.
className	string	—	Extra classes on the <a>.

PaginationEllipsis

Prop	Type	Default	Description
label	string	"More pages"	Visually hidden text read by assistive technologies in place of the three-dot icon.
className	string	—	Extra classes on the around the icon.

Accessibility

The nav has aria-label="Pagination" (ariaLabel to change it). The active page has aria-current="page"; the attribute is absent on the other links. PaginationEllipsis contains the visually hidden text "More pages" (label to change it), so skipped pages are announced.

PaginationPrevious and PaginationNext set aria-label="Go to previous page" and "Go to next page"; these two strings and the visible "Previous" / "Next" are fixed in English.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom: fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// Pagination steps through pages. The current page is a signal; prev /
// next and clicking a number update it, and each cell's active style
// rebinds: no re-render.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Pagination</h1>
      <p style="color:#64748b;margin-top:0">Navigation for splitting content across pages (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals: fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// Pagination steps through pages of content. The current page lives
// in a "use client" island; prev / next and the numbers update it.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Pagination</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Navigation for splitting content across pages.</p>
      <Showcase />
    </main>
  );
}

The React idiom: same UI, for comparison.

← Navigation Menu Popover →

On This Page