Pagination
Page navigation control with ellipsis for large ranges. Supports sibling count, first/last buttons, and aria-current.
Live Demo
Default (20 pages)
With First/Last buttons
Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | — | Current page (1-based). |
totalPages | number | — | Total number of pages. |
onPageChange | (page: number) => void | — | Callback when page changes. |
siblingCount | number | 1 | Number of page buttons shown on each side of current page. |
showFirstLast | boolean | false | Show first and last page jump buttons. |
Usage
import { Pagination } from '@ghiberti85/ui'
const [page, setPage] = useState(1)
// Basic
<Pagination page={page} totalPages={10} onPageChange={setPage} />
// With first/last buttons
<Pagination
page={page}
totalPages={50}
onPageChange={setPage}
siblingCount={1}
showFirstLast
/>