Component
◁▷

Pagination

Page navigation with smart range display, ellipsis, prev/next controls, and full keyboard support.

Import

import { Pagination } from '@stareezy-ui/components'

Basic usage

Live Preview

const [page, setPage] = useState(1)

<Pagination
  page={page}
  totalPages={10}
  onPageChange={setPage}
/>

Size variants

<Pagination page={1} totalPages={10} onPageChange={setPage} size="sm" />
<Pagination page={1} totalPages={10} onPageChange={setPage} size="md" />  // default
<Pagination page={1} totalPages={10} onPageChange={setPage} size="lg" />

Show first and last buttons

<Pagination
  page={page}
  totalPages={20}
  onPageChange={setPage}
  showFirstLast  // renders ⟨ and ⟩ buttons to jump to first/last page
/>

Sibling page count

// How many pages to show on each side of the current page
<Pagination
  page={5}
  totalPages={20}
  onPageChange={setPage}
  siblingCount={2}  // default is 1
/>

With BoxLayoutProps

<Pagination
  page={page}
  totalPages={10}
  onPageChange={setPage}
  mt={24}
  alignSelf="center"
/>

Props

PropTypeDescription
pagereqnumberCurrent active page (1-indexed).
totalPagesreqnumberTotal number of pages.
onPageChangereq(page: number) => voidCalled when the user selects a new page.
size"sm" | "md" | "lg"Button size. Defaults to "md".
siblingCountnumberPages to show on each side of the current page. Defaults to 1.
showFirstLastbooleanShow jump-to-first and jump-to-last buttons.
disabledbooleanDisable all pagination controls.

Accessibility

ℹ
Pagination renders a <nav> with aria-label="Pagination". Each page button has an aria-label like "Go to page 3". The active page button has aria-current="page". Prev/next buttons have descriptive aria-label attributes. The component is fully keyboard-navigable with Tab and Enter/Space.

Themes

Pagination is Theme_Reactive — active page, hover, focus, and disabled colors are all resolved from the Active_Theme at render time. Works correctly in all five built-in themes: quasar, light, dark, aurora, and steins-gate.