s-m-r-t
Open the s-m-r-t source on GitHub Switch to dark color scheme
← All UI components

Actions and display

Pagination

Props for Pagination component

Public export

typescript
import { Pagination } from '@happyvertical/smrt-ui/ui';
Import path
@happyvertical/smrt-ui/ui
Props
8
Props described
8 of 8
Bindable state
0
Callback events
1
Verified release
0.57.40

Props

NameTypeRequiredDescription
currentPagenumberYesCurrent active page (1-based)
totalPagesnumberYesTotal number of pages
baseUrlstringNoBase URL for link mode (e.g., '/articles')
onPageChange(page: number) => voidNoWhen provided, renders buttons instead of links and calls this on page change
aria-labelstringNoAccessible label for pagination nav
showFirstLastbooleanNoShow first/last page buttons
maxVisiblenumberNoMaximum number of visible page numbers
density'comfortable' | 'touch'NoControl target density. `touch` raises every page and nav control to `--smrt-touch-target-min`; omit to inherit the ThemeProvider setting (`--smrt-control-target-min`).

Bindable state

This component has no bindable public state.

Callback events

  • onPageChange(page: number) => void

Examples and explanation