Skip to main content

EquaPagination

Last Verified: 2026-05-20 | Storybook source: equa-patternlib-nextjs/stories/EquaPagination.stories.tsx, Line: 6

Purpose

Paged-list navigation controls.

Storybook

StoryReference
DefaultStorybook
Many PagesStorybook
Few PagesStorybook
Single PageStorybook
Middle PageStorybook
Without First LastStorybook
DisabledStorybook
More SiblingsStorybook
With TableStorybook
All VariantsStorybook

API And Props

Prop or ControlSourceNotes
currentPageStorybook controlSee source story for accepted values
totalPagesStorybook controlSee source story for accepted values
siblingCountStorybook controlSee source story for accepted values
showFirstLastStorybook controlSee source story for accepted values
disabledStorybook controlSee source story for accepted values
Sources:
  • equa-patternlib-nextjs/src/components/pagination/pagination.tsx, Line: 5
  • equa-patternlib-nextjs/src/components/pagination/index.ts
  • equa-patternlib-nextjs/stories/EquaPagination.stories.tsx, Line: 6

Figma

UNVERIFIED — requires Figma node assignment

Screenshots

StateAsset
Equa dark themeEquaPagination dark theme
Light themeEquaPagination light theme

Usage Notes

  • Prefer this component over local one-off UI for matching product states.
  • Keep new variants represented in Storybook before adding docs references here.
  • Use token-backed colors, spacing, radius, and shadows from Foundations.

Accessibility Notes

  • Preserve keyboard and focus behavior from the source component.
  • Any icon-only controls must provide an accessible label in consuming product code.
  • Validate color contrast in both Equa dark and light theme screenshots before release.