On this page
Proposed CSC Standards · 0.1.0
Pagination
Move between pages of a bounded list.
Reach another page of records without loading every row.
What this describes
When to use
- A table or list with more rows than the first view.
When not to use
- A short list that fits on one screen.
- A wizard. Use Stepper.
Allowed variants
Numbered
Jump to a known page.
- Hierarchy
- Numbered links or buttons.
- Use in
- Desktop tables.
- Restriction
- Current page is marked.
- Accessibility
- Named landmark.
- Responsive
- Switch to simple if the row overflows.
Compact
Fewer page numbers.
- Hierarchy
- Shorter row.
- Use in
- Medium widths.
- Restriction
- Still names previous and next.
- Accessibility
- Same landmark.
- Responsive
- Fits a tablet column.
Previous / next
Narrow screens.
- Hierarchy
- Two controls.
- Use in
- Under 480px.
- Restriction
- Both controls have text names, not chevrons alone.
- Accessibility
- Names are Previous and Next or equivalent.
- Responsive
- This is the narrow variant.
Mandatory rules
Use a navigation landmark named Pagination
The control is a nav with an accessible name.
Implementation detail
Otherwise it is an unlabeled set of buttons.
Wrap the controls in a nav whose accessible name is Pagination.
Check: The landmark name is Pagination.
Disable or remove the current page as an action
The current page is indicated and is not a second activation that reloads the same page without feedback.
Implementation detail
Proposed CSC Standard. A current page that looks like the other pages is easy to miss.
Mark the current page with aria-current="page".
Check: The current page exposes aria-current.
Prefer previous and next on narrow screens
The simple variant keeps two named controls when numbered links would overflow.
Implementation detail
Proposed CSC Standard. A row of page numbers overflows at 320px.
Under 480px, show Previous and Next, or a short page label, instead of a long number row.
Check: At 320px the control fits the column.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- Named navigation landmark.
- Current page is aria-current.
- Edge controls are named.
Responsive behavior
- Use the simple variant before the row overflows.
- Icon-only previous and next still need accessible names.
Component states
Current
aria-current="page".
First or last
Previous is unavailable on the first page and Next on the last, with a name that says so.
Correct implementation
The landmark is named Pagination. The current page uses aria-current.
Imports: None. Dependencies: None. Rules: PAG-001.
export function RecordPages() {
return (
<nav aria-label="Pagination">
<button type="button">Previous</button>
<span aria-current="page">1</span>
<button type="button">Next</button>
</nav>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- An unlabeled row of numbers.
- Chevron buttons with no names.
Testing checklist
Agent prompts for this component are in the AI Development Hub.