Primitives
Pagination
Page navigation component for splitting content across multiple pages. Supports boundaries, sibling count, and navigation controls.
Live Demo - Flat
Click page numbers or arrows to navigate. Active page is highlighted with a filled background. Ellipsis appears for page gaps.
Live Demo - Bordered
Bordered variant uses outlined buttons with a primary border on the active page.
Installation
npm install @trinkui/reactImport
import { Pagination } from "@trinkui/react";Usage
<Pagination total={10} defaultPage={3} showControls />Variants
Flat
Bordered
<Pagination variant="flat" total={10} defaultPage={2} />
<Pagination variant="bordered" total={10} defaultPage={2} />Sizes
Small
Medium
Large
<Pagination size="sm" total={10} defaultPage={2} />
<Pagination size="md" total={10} defaultPage={2} />
<Pagination size="lg" total={10} defaultPage={2} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| total | number | -- | Total number of pages |
| page | number | -- | Controlled active page |
| defaultPage | number | 1 | Initial active page (uncontrolled) |
| onChange | (page: number) => void | -- | Callback when active page changes |
| siblings | number | 1 | Number of page buttons on each side of the active page |
| boundaries | number | 1 | Number of page buttons at the start and end |
| showControls | boolean | false | Show previous and next arrow buttons |
| variant | "flat" | "bordered" | "flat" | Visual style of the page buttons |
| size | "sm" | "md" | "lg" | "md" | Size of the page buttons |
Accessibility
- Wrapped in a
<nav>element witharia-label="Pagination". - Active page button has
aria-current="page". - Previous/Next controls have descriptive
aria-labelattributes. - Full keyboard navigation with focus-visible ring styles.