Skip to content
pagination
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

pagination

Fragment reference pagination
tags
ui

Renders a self-contained pagination bar. Pass total, page, and per-page to drive the page count and active state. The component automatically inserts ellipsis gaps when there are more than seven pages.

Attributes

AttributeTypeDefaultDescription
totalnumber100Total number of items across all pages.
pagenumber1Currently active page (1-based).
per-pagenumber10Items displayed per page.
size"small" | "medium" | "large"mediumSize passed to the underlying wa-button elements.
compactbooleanfalseShow only Prev / “Page X of Y” / Next — no numbered buttons.