Pagination

The purpose is to:

• Display long lists or large datasets
• Present table data that exceeds a single page
• Improve load performance for content-heavy pages
• Allow users to move sequentially through results

Pagination is commonly used in tables, directories, dashboards, and search results.

• Rows per page selector – allows users to control how many items are shown
• Range indicator – shows the current item range (e.g. 1–25 of 100)
• Page numbers – enable direct navigation to specific pages
• Navigation controls – first, previous, next, and last page actions.

• Clicking page numbers navigates directly to the selected page
• Navigation arrows move users forward or backward sequentially
• The current page is visually highlighted
• Disabled states are applied when navigation is not available

• Pagination controls must be keyboard accessible
• Use clear focus states for active elements
• Provide descriptive labels for navigation icons (e.g. “Next page”)
• Ensure sufficient contrast for active and inactive states

• Pagination adapts to the available screen space
• Page numbers may be condensed on smaller screens
• Touch targets remain accessible on mobile devices
• Essential controls remain visible at all breakpoints