Pagination

Controlled page controls with previous/next and optional page numbers, count text, compact labels, or dots. Own page in state and pass onChange.

Examples

Default

Five pages with the current page highlighted.

import { Pagination } from '@var-ui/react';

<Pagination page={page} onChange={setPage} totalPages={5} />

Controlled page

Drive page / onChange from local state — useful when you also render range copy or sync with a data fetch.

import { Pagination } from '@var-ui/react';
import { useState } from 'react';

const [page, setPage] = useState(3);

<>
  <p>Page {page} of 12</p>
  <Pagination page={page} onChange={setPage} totalPages={12} />
</>

Props

Accessibility

The root is a nav landmark (label defaults to "Pagination"). Prev/next use icon buttons with clear aria-labels; the active page sets aria-current="page". Ellipsis spans are aria-hidden.