Pagination
A page navigation component with previous/next buttons, numbered pages, and ellipsis truncation.
Preview
Import
import { Pagination } from "@sigil-ui/components";Usage
<Pagination currentPage={2} totalPages={10} onPageChange={setPage} />With ellipsis
<Pagination currentPage={5} totalPages={20} siblingCount={1} />Button variant
Use onClick instead of href for SPA routing:
<PaginationLink onClick={() => setPage(3)}>3</PaginationLink>Token integration
| CSS Variable | Used for |
|---|---|
--s-surface-elevated | Active page background |
--s-primary | Active page accent |
--s-text | Page number color |
--s-text-muted | Ellipsis and disabled color |
--s-border | Item border |
--s-radius-md | Item border radius |
--s-duration-fast | Hover transition |
Props
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | — | Active page, one-indexed |
totalPages | number | — | Total available pages |
onPageChange | (page: number) => void | — | Called when a page is selected |
siblingCount | number | 1 | Page buttons shown around the active page |
Accessibility
- Uses
<nav>witharia-label="Pagination" - Active page marked with
aria-current="page" - Previous/Next buttons have
aria-labeltext