⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Pagination

Pagination

The Pagination component is crucial for navigating through multiple pages in a dataset, allowing users to seamlessly browse extensive lists or tables. It enhances the user experience by efficiently managing large volumes of content and enabling easy movement between pages.

Usage

  • Useful when there’s too much information to fit on a single page or within a single component view.
  • Ideal when loading all available data at once or through scrolling would be too slow.
  • Makes it easier for users to navigate and absorb large amounts of information by breaking it into smaller sections.

Anatomy

The overall structure that holds all pagination elements, often styled as a horizontal bar or row along with sequence of clickable numbers.

Pagination Anatomy

Options

Pagination Page Size 2

Pagination Page Size 4

Specifications

Structure and spacing measurements for Pagination.

Pagination Specifications

Live Demo

The Pagination is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Menu
Popover

Helix - HDFC Life 2025