Navigation
Page Item
Page Item is a single numbered page control within a Pagination trail.
State (Default/Hover/Current/Disabled) — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Page Item is a single numbered page control within a Pagination trail.
When to use
Composed with prev/next Icon Buttons and an ellipsis for paged content.
When not to use
Infinite-scroll or "Load more" patterns.
Accessibility
Each page number should be a real link/button with aria-label="Page N"; Current gets aria-current="page".
Common mistakes
Making every page number identical in weight/color.
Properties
State as variants. Label (text).
Tokens used
semantic/text/secondarysemantic/action/primarysemantic/surface/elevated