Components

Pagination

The pages a long list is split into, as buttons or links for your router.

Import

import { Pagination } from '@rinzai/zen';

API reference

<Pagination>

The pages a long list is split into: previous and next, the first and last pages, and those around the current one (page, from 1). Pages are buttons calling onPageChange, or with href, links (render them with your router's Link through renderLink).

Prop	Type	Default
`count`Required How many pages there are. With fewer than 2, nothing is shown.	`number`	`—`
`page`Required The current page, from 1.	`number`	`—`
`aria-label`	`string`	`Pages`
`className`	`string`	`—`
`href` Pages as links: the URL of each.	`((page: number) => string)`	`—`
`onPageChange`	`((page: number) => void)`	`—`
`renderLink` Renders a page link, e.g. with your router's Link.	`((props: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, page: number) => ReactNode)`	`(props) => <a {...props} />`
`siblings` Pages shown either side of the current one.	`number`	`1`