# 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.

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

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

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Controlled page

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

```tsx
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} />
</>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| onChange | (page: number) => void | yes |  |  |
| page | number | yes |  | Current page number (1-based). |
| className | string \| undefined | no |  |  |
| hasMore | boolean \| undefined | no |  | Cursor-based pagination: whether a next page exists. Ignored once totalPages is computable. |
| isDisabled | boolean \| undefined | no |  |  |
| label | string \| undefined | no | 'Pagination' | Accessible name for the nav landmark. |
| onPageSizeChange | ((pageSize: number) => void) \| undefined | no |  |  |
| pageSize | number \| undefined | no | 10 |  |
| pageSizeOptions | number[] \| undefined | no |  | Shows a page-size `Select` when provided. |
| siblingCount | number \| undefined | no | 1 | Page buttons shown on each side of the current page (`pages` variant only). |
| size | "sm" \| "md" \| undefined | no | 'md' |  |
| totalItems | number \| undefined | no |  | Total item count — takes precedence over `totalPages` when both are set. |
| totalPages | number \| undefined | no |  | Total page count, when the item count isn't known. |
| variant | PaginationVariant \| undefined | no | 'pages' |  |

## Accessibility

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