Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Pagination

The Pagination component is used to divide large sets of content into manageable pages, helping users navigate lists, tables, and search results efficiently. It improves performance and usability by limiting the amount of information shown at once while giving users clear control over navigation.

Purpose

  • Displaying long lists or large datasets
  • Presenting table data that exceeds a single page
  • Improving load performance for content-heavy pages
  • Allowing users to move sequentially through results

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

Component Structure

  • 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.

Interaction Behavior

  • 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

Accessibility Guidelines

  • 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

Responsive Behavior

  • 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
Previous Gallery Next Tables