Pagination

The pagination family covers everything that moves a user through a paged result set: the headless Reka-based primitives (Pagination, PaginationContent, the First/Previous/Next/Last nav buttons, numbered PaginationItems, and PaginationEllipsis), the VUEDA-original footer pieces (PaginationBar, PaginationMeta), and the composed PaginationFooter widget that data views render. All share the same 32px control sizing baseline (Control sizing (VUEDA canon) tokens.css-token:vueda-control-height) and focus treatment as the rest of the navigation family.

This page is the visual contract the default theme guarantees. Use it as the target spec when you re-skin: every cell shown here should still read as the same control after a customization. If a cell breaks, the change has crossed from skin into design language.

For the mechanics of overriding any of this, see Customize VUEDA Appearance. In brief: values belong in CSS tokens; compositions belong in theme keys.

The other navigation primitives (Breadcrumb, NavigationMenu, Menubar) live on the Navigation page.

Primitives

Pagination renders a <nav> landmark with Previous/Next navigation buttons and numbered page items. Page items compose from _ButtonGhost (inactive) or _ButtonOutline (active). Navigation buttons compose from _ButtonOutline and render icon-only as compact (sm) squares. First and Last use double-angle glyphs to set them apart from the single-chevron Previous and Next; each carries an sr-only label so the control keeps an accessible name.

Theme keys: Pagination, PaginationContent, PaginationItem, NavigationPaginationNavButton, PaginationEllipsis.

Footer chrome

PaginationBar is the footer row that seats against the bottom of a data surface (a grid or table). It supplies the border-t, card surface, bottom card-radius caps, and a justify-between flex row, then exposes a default slot. PaginationMeta is the mono supporting-text label for the count or page summary that sits at one end. Consumers compose the meta label, an optional rows-per-page selector, and a Pagination control inside the bar.

Theme keys: NavigationPaginationBar, PaginationMeta.

Composed widget

PaginationFooter is the higher-level widget that data views (ViewList, ViewHistoryList) render. It composes the PaginationBar substrate into a complete footer: a "Showing X to Y of N" range read-out (PaginationMeta) at the start, then a rows-per-page selector and the navigation cluster (first/previous, a mono "Page N of M" indicator, next/last) at the end. The selector's final All entry loads every page at once and hides the navigation cluster.

Theme keys: PaginationFooter.