bellhop by actabl

When to use

Use pagination to divide large datasets into manageable pages, improving performance and user experience.

Large Datasets

Navigate through tables, lists, or grids with many items.

Search Results

Browse through search results or filtered data.

Data Tables

Provide page navigation for data-heavy tables and reports.

When not to use

  • For small datasets (under 20 items)—show all items
  • For infinite scroll patterns—use load more or infinite scroll
  • When users need to see all items at once—provide "show all" option
  • For single-page content—pagination is unnecessary

Modes

Pagination supports two primary modes for different use cases.

Default Mode

Page numbers with ellipsis for many pages.

Compact Mode

Input field for direct page entry.

Configuration Options

Customize pagination to match your application needs.

States

Pagination responds to different page positions and data states.

First Page

Previous button disabled

Last Page

Next button disabled

Disabled

All controls inactive

Best Practices

Follow these guidelines when implementing pagination.

Do

  • Place pagination near the data it controls
  • Show total number of items when possible
  • Provide page size options for user preference
  • Use compact mode for limited space
  • Maintain user's page position when data updates
  • Show clear visual feedback for current page

Don't

  • Don't use pagination for small datasets (< 25 items)
  • Don't reset to page 1 when filters change
  • Don't hide page numbers without ellipsis indication
  • Don't use pagination for infinite scroll scenarios

Accessibility

Pagination is designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move between pagination controls
  • Enter/Space - Activate button or select page
  • Arrow Keys - Navigate page size dropdown

Screen Reader

  • Navigation role is properly announced
  • Current page is clearly indicated
  • Total pages and items are communicated
  • Button states (enabled/disabled) are announced
  • Page changes are announced to users

Visual Design

  • Clear focus indicators on all controls
  • Sufficient color contrast for text and icons
  • Active page is visually distinct
  • Disabled states are clearly indicated

Resources

Design and development resources for the Pagination component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →