Skip to content
v2.5.0
English
Русский
Documentation

Pagination

Pagination is a compound component for paged navigation.
StorybookSourceFigma

Labeling

  • The pagination region should have a meaningful accessible label when several navigation groups exist on the page.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
TabShift + TabMoves the focus through the previous and next triggers and the page items in order. Ellipses and disabled triggers are not focusable.
EnterSpaceActivates the focused item or trigger natively: buttons react to both keys, links only to Enter. The current page carries aria-current='page'.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.

Focus Behavior

  • Focus lands on the interactive child items, not on the root list.

Screen Reader Semantics

  • PaginationItem current exposes aria-current='page'.
  • Link-based pagination often provides the clearest semantics when pages are routeable destinations.

Form Semantics

  • Pagination is navigation, not form input.

Accessibility Risks

  • current page not exposed semantically
  • ellipsis used as if it were a real page action
  • previous/next boundaries not clearly disabled