Pagination
NavigationPage navigation with prev / next and numbered page buttons.
Renders numbered page buttons with previous/next arrows. The current page is Neo Green. Distant pages are collapsed into ellipsis based on the siblings count.
Usage
import { Pagination } from "nosible-ux"
export default function Example() {
return <Pagination total={50} />
}Examples
Controlled with many pages
Sizes
Accessibility
Prev/Next buttons have aria-label. Current page button has aria-current="page". The nav is wrapped in <nav aria-label> passed via the aria-label prop.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | "Pagination" | Accessible label for the nav landmark. |
defaultValue | number | undefined | 1 | Uncontrolled initial page. |
onChange | ((page: number) => void) | undefined | — | Callback when the page changes. |
siblings | number | undefined | 7 | Max page buttons shown before ellipsis collapses. |
size | "sm" | "md" | "lg" | undefined | "md" | Visual size of each page button. |
total | number | — | Total number of pages. |
value | number | undefined | — | Controlled current page (1-indexed). |