Component · Navigation · 15
Pagination
Pagination = numbered pages with an ellipsis for gaps, plus prev and next, with the current page marked.
…
What is a Pagination?
Pagination moves through a known count. Name the window of numbers, where the ellipsis goes, and what happens at the ends.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Prev button
- 02 Page numbers
- 03 Ellipsis
- 04 Next button
When to use
- Search results and long tables with a known total
- Archives split across pages
- Admin lists where deep links to a page matter
Avoid when
- The list is infinite or streamed — use infinite scroll
- There are fewer than two pages
- Users scan rather than navigate — use filters
Never wrap from the last page to the first — disable the ends so the user knows where the list stops.
See also
Anti-patterns
Sub-44px Touch Target→ Create a pagination component.
STYLE
- 32px square buttons, 8px radius, 13px #1D1D1F numbers
- current page: #0071E3 surface, white number, not clickable
- prev and next carry 14px chevrons and a visible label
- ellipsis replaces hidden ranges with a 13px #6E6E73 …
STATES
- default, hover #F5F5F7, current, disabled ends at 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui