Pagination

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Pagination component provides navigation for paginated content. Built with accessibility in mind, it includes previous/next buttons, page numbers, and ellipsis for large page sets. Perfect for tables, search results, and content lists.

Basic Usage

View in Storybook

With Ellipsis

Disabled States

Large Page Set

Compact Pagination

Interactive Example

Current page: 3 of 10

Properties

Pagination

Property	Type	Description
className	string	Additional CSS classes for the pagination container.
children	ReactNode	Pagination content (typically PaginationContent).

PaginationContent

Property	Type	Description
className	string	Additional CSS classes for the content container.
children	ReactNode	Pagination items.

PaginationItem

Property	Type	Description
className	string	Additional CSS classes for the item container.
children	ReactNode	Item content (links, buttons, ellipsis).

PaginationLink

Property	Type	Description
isActive	boolean	Whether this page is currently active.
disabled	boolean	Whether the link is disabled.
onClick	() => void	Click handler for the page link.
className	string	Additional CSS classes.
children	ReactNode	Link content (usually page number).

PaginationPrevious

Property	Type	Description
disabled	boolean	Whether the previous button is disabled.
onClick	() => void	Click handler for previous navigation.
className	string	Additional CSS classes.

PaginationNext

Property	Type	Description
disabled	boolean	Whether the next button is disabled.
onClick	() => void	Click handler for next navigation.
className	string	Additional CSS classes.

PaginationEllipsis

Property	Type	Description
className	string	Additional CSS classes for the ellipsis.

Accessibility

The Pagination component includes comprehensive accessibility features:

• Keyboard Navigation - Full keyboard support with arrow keys and Enter
• Screen Reader Support - Proper ARIA labels and navigation landmarks
• Focus Management - Clear focus indicators and logical tab order
• Active State - Clear indication of current page with aria-current="page"
• Disabled States - Proper handling of disabled navigation buttons
• Semantic HTML - Uses proper navigation and list elements

Common Use Cases

The Pagination component is perfect for:

• Data Tables - Navigate through large datasets and table rows
• Search Results - Browse through search result pages
• Product Listings - Navigate e-commerce product catalogs
• Blog Posts - Browse through article archives and categories
• User Lists - Navigate through user directories and member lists
• Content Galleries - Browse through image and media galleries
• API Results - Handle paginated API responses and data feeds

Best Practices

1. Show Current Context - Always indicate current page and total pages
2. Disable Appropriately - Disable previous on first page, next on last page
3. Use Ellipsis Wisely - Show ellipsis when there are many pages to navigate
4. Provide Shortcuts - Include first/last page links for large page sets
5. Mobile Optimization - Consider compact layouts for smaller screens
6. Loading States - Show loading indicators during page transitions
7. URL Synchronization - Keep pagination state in sync with browser URL
8. Performance - Implement efficient data loading and caching strategies