Navigation
Pagination
Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Semantic nav element with aria-label="Pagination"
- aria-current="page" on current page button
- Descriptive aria-labels on icon-only navigation buttons
- Keyboard accessible with visible focus indicators
- 32px minimum touch target size
- Disabled state with opacity + cursor change
- Active page uses border + background, not color alone
When to use this component
✓Do's
- •Large data sets that need paging
- •Search results with many items
- •Lists where loading all items is impractical
- •When users need to navigate to specific pages
✗Don'ts
- •Small lists (under 20 items), show all
- •Infinite scroll is preferred for the use case
- •Sequential content, use Stepper
- •Content that should be visible at once
Do's and Don'ts
✓ Do's, Show page numbers with total count
Showing
20
of 15000 itemsShow page numbers and total count, users can judge exactly how many records exist and jump directly to a page.
✗ Don'ts, Use Previous/Next only
Don't use only Previous/Next, users can't tell how many pages exist or jump to a specific one.