Component reference
Pagination
Move through pages while the application owns the data.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Badge, Pagination } from "@pimolu/react";
function ControlledPagination() {
const [page, setPage] = useState(4);
return (
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Badge variant="primary">page {page}</Badge>
<span className="text-sm text-muted leading-relaxed">of 20</span>
</div>
<Pagination page={page} pageCount={20} onPageChange={setPage} />
</div>
);
}
export function DemoExample() {
return (<ControlledPagination />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
Enumerated from paginationVariantMap: sm, md and lg.
Few pages and labels
With five pages there is no ellipsis; the arrow labels can be localised.
Examples
A result footer normally pairs the pagination with a count.
Usage
Update the displayed dataset when the selected page changes; the control does not fetch data.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluPaginationProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
page | number | undefined | — | Controlled current page, starting at 1. |
defaultPage | number | undefined | 1 | Initial page when uncontrolled. Defaults to 1. |
pageCountRequired | number | — | Number of pages. |
onPageChange | ((page: number) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
siblingCount | number | undefined | 1 | Pages shown on each side of the current page. Defaults to 1. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
previousLabel | string | undefined | "Previous page" | Accessible name of the previous button. |
nextLabel | string | undefined | "Next page" | Accessible name of the next button. |
size | "sm" | "md" | "lg" | undefined | "md" | Button size. Defaults to "md". |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
pagenumber | undefinedNo default extracted.
Controlled current page, starting at 1.
defaultPagenumber | undefinedDefault: 1
Initial page when uncontrolled. Defaults to 1.
pageCountRequirednumberNo default extracted.
Number of pages.
onPageChange((page: number) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
siblingCountnumber | undefinedDefault: 1
Pages shown on each side of the current page. Defaults to 1.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
previousLabelstring | undefinedDefault: "Previous page"
Accessible name of the previous button.
nextLabelstring | undefinedDefault: "Next page"
Accessible name of the next button.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Button size. Defaults to "md".
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Name pagination, expose the current page and keep disabled boundaries non-operable.