Skip to content
← Inventory

Pagination

Standalone pagination component. Works with any data source — not coupled to react-table.

Usage

import { Pagination, PaginationProps } from "@desk/ui/components/pagination";

Best practices

  • Drive it as a controlled control — pass page+totalPages and update state in onPageChange; it holds no internal page state.

  • It is data-source agnostic (not coupled to react-table); for grid paging use the DataGrid's own pagination parts instead.

  • Signal an in-flight jump with loadingPage={n} so only that button spins; leave a11y labels to the component (each control is pre-labelled).

Props

PropTypeDefaultDescription
classNamestring

Additional className for the nav wrapper

disabledboolean

Disable all controls

loadingPagenumber

Page button to render in loading state

onPageChange(required)(page: number) => void

Called when page changes

page(required)number

Current page (1-indexed)

sizeResponsiveSize"sm"

Button size — a single token or a per-breakpoint object like { base: "xs", md: "sm" }. Forwarded to every control Button.

totalPages(required)number

Total number of pages

Also exports

  • interfacePaginationProps

Composition

Builds on

Button