Pagination
Previous and next buttons around the page numbers of a long list or table.JSX
<Pagination count={10} />Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Pagination } from '@advui/core'
<Pagination count={12} page={page} onPageChange={setPage} />Examples
Basic
Preview
Code
Controlled
Drive it from your data’s page.Preview
Code
Showing 1–10 of 87 projects
Compact
Preview
Code
API reference
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
count required | number | — | Number of pages. |
page | number | — | Current page, from 1 (controlled). |
defaultPage | number | 1 | Initial page when uncontrolled. |
onPageChange | (page: number) => void | — | Page changed. |
siblings | number | 1 | Pages shown on each side of the current one. |
boundaries | number | 1 | Pages always shown at the start and the end. |
variant | 'full' | 'compact' | 'full' | `compact` shows "Page 3 of 10" instead of numbers; good on phones. |
size | 'sm' | 'md' | 'md' | Button size. |
disabled | boolean | false | Disables every button. |
labels | Partial<PaginationLabels> | — | Button names and the compact text, for translation. |
getPaginationItems(page, count, options?)
The page numbers and gaps to show, for building your own pager. The item count stays the same while paging.Accessibility
- A
navlandmark named "Pagination" (setaria-labelwhen a page has more than one) around a list of buttons. - Page buttons are named "Page 3"; the current one has
aria-current="page"on web and is "selected" on native. - Previous and next are named icon buttons, disabled at the ends. The gaps are hidden.
- The compact text is a polite live region, so the new page is announced.
| Key | Action |
|---|---|
| Tab | Moves through the buttons. |
| Enter / Space | Goes to that page. |
Responsive behavior
Below the xs breakpoint the buttons shrink to 32px so a full pager fits a phone. On very narrow screens they wrap; use variant="compact" or siblings={0} there.