Pagination API

API reference for the Pagination component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Pagination

Import

import { Pagination } from '@soroush.tech/design-system/Pagination'

Props

Prop	Type	Default	Description
`count`	`number`	-	Total number of pages. Required.
`page`	`number`	-	Controlled current page (1-based).
`defaultPage`	`number`	`1`	Uncontrolled initial page.
`onChange`	`(page: number) => void`	-	Fired with the target page.
`siblingCount`	`number`	`1`	Pages always visible either side of the current page.
`boundaryCount`	`number`	`1`	Pages always visible at the start and end.
`color`	`keyof Theme['palette']`	`'primary'`	Selected-item color.
`variant`	`'text' \| 'outlined'`	`'text'`	Item style.
`shape`	`'circular' \| 'rounded'`	`'circular'`	Item corner shape.
`size`	`keyof Theme['sizes']`	`'md'`	Item density.
`disabled`	`boolean`	`false`	Disables every item.
`shouldShowFirstButton` / `shouldShowLastButton`	`boolean`	`false`	Adds first/last-page buttons.
`shouldHidePrevButton` / `shouldHideNextButton`	`boolean`	`false`	Removes the previous/next buttons.
`getItemAriaLabel`	`(type, page, isSelected) => string`	built-in	Accessible name per item ("Go to page 3", "Go to next page", ...).
`aria-label`	`string`	`'pagination navigation'`	Landmark label.

usePagination

The headless model is exported for custom renderings:

import { usePagination } from '@soroush.tech/design-system/Pagination'

const { items } = usePagination({ count: 10, onChange })
// items: [{ type: 'previous', page, isSelected, isDisabled, onClick }, { type: 'page', ... }, ...]

Accessibility

Root landmark role="navigation" + aria-label.
Every actionable item has an accessible name via getItemAriaLabel; the current page carries aria-current="page".
Ellipses render as non-interactive, aria-hidden list items.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.