i

Pagination

Navigating · researched

Controls for moving between pages of a long list or table, sometimes with a page-size choice.

molecule · contains button, link

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Pagination native: partly antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
default, disabled
Accessibility guidance
no

ul/li with a for pages, button for prev/next and an input for jumper (rc-pagination); page links are a without href. Has simple mode and size changer.

docs ↗ · code ↗

Carbon

Pagination native: partly @carbon/react 1.117.0
Variants
Pagination, Pagination nav
Sizes
large, medium, small
States documented
—
Accessibility guidance
yes

Pagination uses a native Select and icon buttons in a div; Pagination nav renders a nav. States are inherited from the nested select and button, per the docs.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/pagination/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Pagination"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/pagination/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Pagination"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Pagination native: yes govuk-frontend 6.5.1
Variants
block, numbered items
Sizes
—
States documented
default
Accessibility guidance
no

nav containing a ul of links with aria-current on the current page; a block style for previous/next between content pages and a numbered style for pages of items.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No pagination component and no roadmap entry.

Primer

Pagination native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

Renders nav with aria-label=Pagination and anchor page links. Docs show controlled use, surrounding/margin page counts and previous/next only. DataTable has its own button-based pagination.

docs ↗ · code ↗

Spectrum

Pagination native: yes
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
listing, explicit
Sizes
s, m, l, xl
States documented
—
Accessibility guidance
no

Spectrum CSS only (@spectrum-css/pagination 10.2.0, a Storybook entry confirmed in its index.json); absent from the spectrum.adobe.com sitemap, from SWC 1st-gen and 2nd-gen packages and from React Spectrum S2 and React Aria source. Variants and sizes are the story controls; the markup is nav, button and input.

docs ↗ · code ↗

USWDS

Pagination native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

nav with ul of anchors; docs list an unbounded behaviour and no variants.

docs ↗ · code ↗

Platform facts

Native elementnot recordedNull holds. No pagination element, role or APG pattern (the APG patterns index lists none; 0 'pagination' hits in the HTML Living Standard). Spec link types: prev ('the link is leading to the document that is the previous logical document in the sequence'; synonym previous) and next, valid on link, a, area and form. nav marks a section of navigation links (MDN: implicit ARIA role navigation). Page numbers, ellipsis and page-size selector are design-system terms.
Baseline—
APG patternbreadcrumb
ARIA role—
Shipped by6 of 7 systems

Anatomy

    The seven states

    default Inference, no source: Current page marked; aria-current=page is stated only on the APG Breadcrumb page, not for pagination.
    hover Inference, no source: Pointer-only CSS state; not defined by APG or HTML.
    focus Inference, no source: Links/buttons are tab stops.
    active Inference, no source: CSS :active on links/buttons.
    disabled Inference, no source: First/last controls at the ends of the sequence; no source defines it.
    error n/a — Not defined.
    loading n/a — Not defined.

    Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.