Pagination

molecules

Page number navigator with prev/next. URL-driven (controlled). Compact mode for tables, full mode for grids.

ARIA Role: navigation

Demo

Demo for Pagination (molecules)

Page number navigator with prev/next. URL-driven (controlled). Compact mode for tables, full mode for grids.

Props

Prop	Type	Required	Default	Description
`currentPage`	`number`	Yes	`—`	1-based, must be 1..totalPages
`totalPages`	`number`	Yes	`—`	Must be ≥1
`onPageChange`	`(page: number) => void`	Yes	`—`

TypeScript Interface

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  siblingCount?: number;
  showFirstLast?: boolean;
  ariaLabel: string;
}

Assertions (NASA Rule 5)

[type]currentPage in [1, totalPages]; totalPages ≥1 (NASA Rule 7)(NASA Rule 7)
[aria]<nav aria-label>; current page button has aria-current='page'(WAI-ARIA Pagination Pattern)

Usage

Import

import { Pagination } from '@epasslive/design-system'

Basic

<Pagination />

With Variants

<Pagination variant="primary" size="md" />