Pagination
Neutral
Preview
index.tsxPreview
index.tsxAccent
Preview
index.tsxPreview
index.tsxControls
Preview
index.tsxPreview
index.tsxPage: 1
Pagination component
Preview
index.tsxPreview
index.tsxPagination siblings
Preview
index.tsxPreview
index.tsxPreview
index.tsxPreview
index.tsxPreview
index.tsxDesign Tokens for Pagination
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-bg-pagination-item-enabled | Pagination item background | Default/Enabled |
| --par-color-bg-pagination-item-hovered | Pagination item background | Hovered |
| --par-color-bg-pagination-item-selected-neutral | Pagination item background | Selected (neutral) |
| --par-color-bg-pagination-item-selected-accent | Pagination item background | Selected (accent) |
| --par-color-bg-pagination-item-disabled | Pagination item background | Disabled |
| --par-color-text-pagination-item-page-enabled | Pagination item text | Default/Enabled |
| --par-color-text-pagination-item-page-hovered | Pagination item text | Hovered |
| --par-color-text-pagination-item-page-selected-neutral | Pagination item text | Selected (neutral) |
| --par-color-text-pagination-item-page-selected-accent | Pagination item text | Selected (accent) |
| --par-color-text-pagination-item-page-disabled | Pagination item text | Disabled |
| --par-color-text-pagination-item-control-enabled | Control button text | Default/Enabled |
| --par-color-text-pagination-item-control-disabled | Control button text | Disabled |
| --par-color-border-pagination-item | Pagination item border | Default/Enabled |
| --par-color-border-pagination-item-disabled | Pagination item border | Disabled |
Pagination API Reference
<Pagination />
| Prop | Type | Default | Description |
|---|---|---|---|
| totalPage | number | 0 | Total number of pages |
| page | number | 1 | Current active page |
| bordered | boolean | false | Show border around pagination |
| onlyControl | boolean | false | Show only navigation controls |
| controlConfig | controlConfigType | Custom config for control buttons | |
| color | 'neutral' | 'accent' | 'neutral' | Color theme |
| siblings | 0 | 1 | 2 | 3 | 0 | Number of sibling page numbers to show |
| onPageChange | function(page: number) | Callback when page changes | |
| component | 'button' | 'a' | React.ComponentType | 'button' | Component for page links |
| componentProps | Record<string, any> | Extra props for page item component | |
| to | function(page: number): string | Generate URL for a given page | |
| ...ulProps | HTMLUListElement props | All native ul props (className, style, ...) |
Note: Pagination inherits all native props from HTMLUListElement.