# Pagination

> Moves through a long list a page at a time.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext } from "@rrios-forge/ui/molecules/pagination";`
- **Source**: `packages/ui/src/molecules/pagination`

Semantic page-list navigation. Renders `<nav aria-label="Pagination">` with an `<ol>` of items. Active page sets `aria-current="page"`. Previous / Next render directional glyphs + inline labels for both screen-reader and sighted users.

## Use it for

- Filters / pagination / stepper → `FilterBar` / `Pagination` / `Stepper`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-pagination--playground) · frame: `/iframe.html?id=components-molecules-pagination--playground&viewMode=story`
- [Sizes](/?path=/story/components-molecules-pagination--sizes) · frame: `/iframe.html?id=components-molecules-pagination--sizes&viewMode=story`
- [In context](/?path=/story/components-molecules-pagination--in-context) · frame: `/iframe.html?id=components-molecules-pagination--in-context&viewMode=story`
- [First page](/?path=/story/components-molecules-pagination--first-page) · frame: `/iframe.html?id=components-molecules-pagination--first-page&viewMode=story`

## Decisions that name it

- ADR-029 — The page gutter belongs outside the frame

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).