Pagination

Page links with previous and next buttons and collapsed ranges.

Import
import { Pagination } from '@texuli/primitives/pagination';
Pattern
Navigation landmark
Size budget
4.0 KiB gzip for @texuli/primitives/pagination
Reference
packages/primitives/docs/prim-pagination.md

Live demo

Loading the Pagination demo…

Anatomy

Pagination anatomy: each box holds the parts inside it.
  • Pagination.Root
    • Pagination.PreviousButton
    • Pagination.Page
    • Pagination.Ellipsis
    • Pagination.NextButton

Behavior checks

tests/behavior/scenarios/pagination.spec.ts runs 5 rows against the Pagination scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 5 rows
  1. pagination is a named navigation landmark with one current page
  2. pointer activation selects a page and updates the current-page state
  3. Enter and Space select the focused page button
  4. touch activation advances to the next page
  5. the pagination landmark and controls have no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/pagination (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).