Pagination

Page-number navigation for paging a list of arbitrary items (e.g. a blog index), with ellipsis ranges and optional first/last/prev/next controls.

Source

Page-number navigation for paging a list of arbitrary items (e.g. a blog index), with ellipsis ranges and optional first/last/prev/next controls. Renders a role="navigation" landmark whose items are PaginationItems computed by the headless usePagination hook.

Pages are 1-based - unlike TablePagination (0-based, table footer, rows-per-page selector). Prefer Pagination where SEO/URLs matter.

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

;<Pagination count={10} page={page} onChange={setPage} />

Examples

Default

<Pagination count={10} />

Outlined

<Flex flexDirection="column" gap={3}>
  <Pagination count={10} variant="outlined" />
  <Pagination count={10} variant="outlined" color="secondary" />
  <Pagination count={10} variant="outlined" disabled />
</Flex>

Rounded

<Flex flexDirection="column" gap={3}>
  <Pagination count={10} shape="rounded" />
  <Pagination count={10} variant="outlined" shape="rounded" />
</Flex>

Sizes

<Flex flexDirection="column" gap={3}>
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <Pagination key={size} count={10} size={size} />
  ))}
</Flex>

Buttons

<Flex flexDirection="column" gap={3}>
  <Pagination count={10} shouldShowFirstButton shouldShowLastButton />
  <Pagination count={10} shouldHidePrevButton shouldHideNextButton />
</Flex>

Ranges

<Flex flexDirection="column" gap={3}>
  <Pagination count={11} defaultPage={6} siblingCount={0} />
  <Pagination count={11} defaultPage={6} />
  <Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
  <Pagination count={11} defaultPage={6} boundaryCount={2} />
</Flex>

Controlled

Page: 1

<ControlledPagination />