# Pagination

> Page navigation controls for multi-page data sets; exposes current page and total page count

- Tier: patterns
- Storybook: `Components/Pagination`
- Import: `import { Pagination } from '@amezquita/design-system/components/patterns/Pagination'`

## Props

| Prop | Type | Description |
|---|---|---|
| `currentPage` | `number` |  |
| `totalPages` | `number` |  |
| `onPageChange` | `(page: number) => void` |  |
| `compact?` | `boolean` |  |
| `className?` | `string` |  |
| `label?` | `string` | Accessible name for the nav landmark — override when a page renders more than one pagination. |

## Tokens

| Token | Type | Value |
|---|---|---|
| `--pagination-button-background` | color | `transparent` |
| `--pagination-button-font-size` | dimension | `14px` |
| `--pagination-button-font-weight` | fontWeight | `500` |
| `--pagination-button-size` | dimension | `48px` |

## Usage example

```tsx
() => {
  const [page, setPage] = useState(5)
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' }}>
      <p style={{ margin: 0, fontSize: '13px', color: 'var(--color-text-secondary)' }}>
        Page {page} of 10
      </p>
      <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
    </div>
  )
}
```