Skip to content
Components
@app-studio/components

Pagination

A pagination component for navigating through pages with customizable appearance, page size selection, and navigation controls.

View component source

Import

ts
import { Pagination } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

INTERACTIVE EXAMPLE

Loading preview…

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

Pagination
PropTypeDefaultDescription
currentPage Requirednumber—See the type and source declaration for this property.Source
totalPages Requirednumber—See the type and source declaration for this property.Source
onPageChange Required(page: number) => void—See the type and source declaration for this property.Source
pageSizenumber—See the type and source declaration for this property.Source
pageSizeOptionsPageSizeOption[]—See the type and source declaration for this property.Source
onPageSizeChange((pageSize: number) => void)—See the type and source declaration for this property.Source
showPageSizeSelectorboolean—See the type and source declaration for this property.Source
showPageInfoboolean—See the type and source declaration for this property.Source
maxPageButtonsnumber—See the type and source declaration for this property.Source
showFirstLastButtonsboolean—See the type and source declaration for this property.Source
sizeSize
"sm""md""lg"
—Size preset for the component.Source
variantVariant
"outline""default""filled"
—Visual treatment of the component.Source
shapeShape
"square""rounded""circular"
—Shape preset for the component.Source
viewsPaginationStyles—Style overrides for the named internal parts.Source
visiblePageNumbers(string | number)[]—See the type and source declaration for this property.Source
Common inherited styling props (7)

Scroll horizontally to see every column.

Pagination inherited
PropTypeDefaultDescription
mediaRecord<string, CssProps>—See the type and source declaration for this property.
onClickany—Called when the user activates the component.
askeyof JSX.IntrinsicElements
"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"
—See the type and source declaration for this property.
themeMode"light" | "dark"
"light""dark"
—See the type and source declaration for this property.
_hoverstring | CssProps—See the type and source declaration for this property.
_activestring | CssProps—See the type and source declaration for this property.
_focusstring | CssProps—See the type and source declaration for this property.

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

  • Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
  • For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
  • These previews run in the browser. Check React Native setup for platform requirements and differences.
Browse documentation source