# Pagination
> Generated from pagination.contract.json — do not edit by hand.

A page selector for a paged list or table — prev / numbered pages with ellipsis / next; two sizes, a simple mode, and a whole-control disabled state.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: dashboard, admin, editor.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `total` | number | `0` | Total item count across all pages (used with page-size) |
| `page-size` | number | `10` | Items per page; total ÷ page-size decides the page count |
| `pages` | number | `—` | Direct page count; wins over total+page-size when set |
| `current` | number | `1` | The active page (1-based); reflected as it changes |
| `size` | 'default' | 'small' | `default` | Cell scale: 32px square (default) or compact 24px (small) |
| `simple` | boolean | `false` | Collapse the numbers to prev · n / total · next |
| `disabled` | boolean | `false` | Disable the whole control (every cell not-allowed) |
| `change` | CustomEvent | `—` | Composed event on page change, detail { page } |

## Visual standard (measured)
- Cell (default): min-width 32 · height 32 · radius 8 · SemiBold 600
- Cell (small): min-width 24 · height 24 · radius 6 · 12px
- Rest: white bg, 1px border #E3E3E3, text-default
- Hover: border-hover #D3B4FF + color-primary text (motion-fast + ease-out)
- Current: color-primary #6A1EBB fill, text-inverse #FFFFFF
- Ellipsis: … text-tertiary #8A8A8A, aria-hidden, for elided ranges
- Simple: prev · <b>n</b> / total · next — n in color-primary
- Disabled prev/next: text-disabled #B5B5B5, not-allowed
- Disabled (all): every cell not-allowed; current keeps brand fill at .55 opacity
- Arrows: <aha-icon name="system-caret-left|right" size=16>

## When to use
- **Pagination** — a long list or table is split into pages the user steps through
- **infinite scroll** — a feed the user grazes — not a set they navigate by position
- **Load more** — occasional appends where exact page position doesn't matter

Show pagination only when there is more than one page. Keep page cells on the 32px square + radius-8 scale (or the 24px small scale for dense tables), and reserve the brand fill for the current page. The first/last ellipsis keeps long ranges compact; reach for simple mode when width is tight.