Pagination
Navigation controls for paging through data. Supports numbered pages and a simple previous/next variant.
Basic Usage
Simple Variant
Sizes
Disabled
Mobile considerations
- For mobile, prefer
variant="simple"(previous / next + "page X of Y") — numbered pagination crowds narrow viewports. - Page buttons hit 44px tap target on
size="md"/lg". Forsize="sm"on mobile, switch to simple variant or wrap in a row with extra padding. - Consider infinite-scroll or "Load more" patterns instead of pagination for mobile-first content feeds.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
totalPages | number | - | Total number of pages |
currentPage | number | - | Currently active page (1-indexed) |
onChange | (page: number) => void | - | Callback when page changes |
siblingCount | number | 1 | Number of sibling pages to show around current |
variant | 'default' | 'simple' | 'default' | Visual variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size preset |
disabled | boolean | false | Disable all pagination controls |
className | string | - | Additional CSS class name |
style | CSSProperties | - | Additional inline styles |