Components • Pagination

Pagination

Navigate paginated data sets. Prev/Next chevrons, numbered pages with ellipsis collapse for long ranges.

Few pages

<PaginationStateful total={5} />

Many pages (ellipsis collapse)

<PaginationStateful total={24} initialPage={7} />
Accessibility

How Pagination works with assistive tech

Role
  • navigation
Keyboard
  • Tab + Enter (button); Arrow keys optional (if implemented)
ARIA attributes
  • aria-label="Pagination"; aria-current="page" on active page; aria-label on prev/next ("Previous page"/"Next page")
Focus behavior
  • visible-3px (global outline)

Ellipsis (...) is decorative (aria-hidden). Disabled prev/next use aria-disabled, not disabled attribute, to remain reachable by SR.