## Pagination
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.
Default to the HTML snippet — <aha-pagination> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, admin, editor.
Props:
- total: number, default 0. Total item count across all pages (used with page-size)
- page-size: number, default 10. Items per page; total ÷ page-size decides the page count
- pages: number, default —. Direct page count; wins over total+page-size when set
- current: number, default 1. The active page (1-based); reflected as it changes
- size: 'default' | 'small', default default. Cell scale: 32px square (default) or compact 24px (small)
- simple: boolean, default false. Collapse the numbers to prev · n / total · next
- disabled: boolean, default false. Disable the whole control (every cell not-allowed)
- change: CustomEvent, default —. Composed event on page change, detail { page }
Tokens: border, border-hover, border-disabled, bg-container, text-default, text-inverse, text-disabled, text-tertiary, color-primary, border-focus, radius-default.
Use when: 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).