Primitive

Pagination

Compact pagination footer with page, selection, and next/previous controls.

Use Pagination below pageable regions. Keep page calculations, page size, and controlled pagination state in the owning component.
data
DOM renderImage render
PaginationDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Pagination footer with active selection count.
Page 2 / 63 selected
Render state

Start

Pagination footer at the first page.
Page 1 / 60 selected
Render state

End

Pagination footer at the final page.
Page 4 / 40 selected
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
page *ReactNode-Current page display value.
pageCount *ReactNode-Total page display value.
selectedCountReactNode0Selected row count.
previousDisabledbooleanfalseDisables previous-page control.
nextDisabledbooleanfalseDisables next-page control.
onPrevious() => void-Previous-page handler.
onNext() => void-Next-page handler.