Components · Navigation

Pagination

A row of page-number and previous/next controls. The current page is brand-filled; prev/next disable at the bounds. Every item is at least a 32×32 target.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

pagination-item

backgroundColor: {colors.surface-card}
textColor: {colors.ink}
borderColor: {colors.border-strong}
borderWidth: 1px
borderRadius: {rounded.base}
fontFamily: Geist
fontSize: 14px
fontWeight: 500
height: 32px
minWidth: 32px
paddingX: 12px
display: flex
alignItems: center
justifyContent: center
cursor: pointer

pagination-item-hover

backgroundColor: {colors.surface-muted}

pagination-item-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

pagination-item-active

backgroundColor: {colors.brand}
textColor: {colors.brand-text}
borderColor: {colors.brand}

pagination-item-disabled

backgroundColor: {colors.disabled-bg}
textColor: {colors.disabled-text}
borderColor: {colors.disabled-border}
cursor: not-allowed

Build with the skill

No package to install — hand this to your AI to generate pagination in your stack.

Prompt for your AI

Implement the Zetta "Pagination" component in this project's stack using the zetta-design-md skill.

- Apply the `pagination` spec from the skill (variants: item, active, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Items: 32×32 min, 1px border-strong, 8px radius, 14 / 500 Geist. Hover: surface-muted.
Active page: brand fill + brand-text, marked aria-current="page". Prev/next at the bounds use the disabled token set.
Wrap in <nav aria-label="Pagination">.

Known gaps

Ellipsis (…) for large page counts is not yet specified.