# Pagination

Controlled page navigation with bounded page windows, buttons or native links.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Pagination } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Pagination page={1} pageCount={20} getHref={page => `?page=${page}`} />
    </FloodRoot>
  );
}
```

## Design notes

- Use getHref for native route links, onPageChange for local controlled data, or both for a navigation notification. Modifier clicks retain browser behavior.
- Page and pageCount must be positive safe integers within range. Empty datasets can omit Pagination. siblingCount 0/1/2 controls compactness; endpoints are noninteractive when unavailable.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `page` | `number` | `Required` |
| `pageCount` | `number` | `Required` |
| `onPageChange` | `(page: number) => void` | `—` |
| `getHref` | `(page: number) => string` | `—` |
| `siblingCount` | `0 \| 1 \| 2` | `1` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"sm"` |
| `disabled` | `boolean` | `false` |
| `label` | `string` | `"Pagination"` |
| `previousLabel` | `string` | `"Previous page"` |
| `nextLabel` | `string` | `"Next page"` |
| `pageLabel` | `(page: number) => string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "onChange">` | `Forwarded` |