Component contract
What it must accomplish
Break a large result set into manageable views without losing orientation.
First pageMiddle pageLast pageLoadingFilteredEmpty
Usage
Choose the control by behavior
Use it when
- The collection has stable pages or ranges
- People need a sense of position and total scope
- Loading every item would harm performance or comprehension
Use another pattern when
- The collection is short
- Continuous discovery is more important than location
- Pagination would hide critical selected items
Anatomy
Stable parts create a reliable contract
- 1Previous and next controls
- 2Current page
- 3Page or range links
- 4Result count
- 5Optional page-size control
Explanation
Interaction and keyboard behavior
- Links and buttons follow native behavior
- Focus moves only when the product intentionally changes context
- Loading does not trap focus
Why this matters
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Cross-system baseline
Accessible behavior
- Label the pagination navigation
- Expose the current page
- Give page links specific accessible names
- Preserve headings and focus after navigation
Responsive considerations
Adapt the decision—not only the dimensions
Reduce visible page numbers before shrinking targets; always retain current position and previous/next movement.
Content considerations
Language is part of the component
- State the result range when useful
- Keep terminology stable
- Preserve query and filter state in the URL
Common mistakes
Patterns that weaken the experience
01
Resetting filters on page change
02
Using disabled links with no semantics
03
Infinite scrolling without a reachable footer or location
Comparison
What to study across systems
Enterprise systems optimize pagination for dense tables; public-service systems prioritize simple, resilient previous/next navigation with clear location.
Open comparison