Pagination
A flexible pagination component for navigating through paginated content. Features responsive design with different visible page counts for mobile, tablet, and desktop views, ellipsis for hidden pages, and customizable navigation controls.
Installation
Import
Usage
The Pagination component is essential for navigating through large datasets, search results, content lists, and any paginated content. Use it in data tables, article lists, product catalogs, and admin interfaces. The component automatically handles responsive behavior, showing fewer pages on mobile devices and more on desktop. The ellipsis feature allows users to jump to pages that aren't directly visible.
Design Guidelines
The pagination component uses a clean, button-based interface with clear visual hierarchy. The current page is highlighted, and navigation buttons are disabled when at the boundaries. The component is fully responsive, automatically adjusting the number of visible pages based on screen size. Ellipsis buttons open dropdown menus for accessing hidden pages. Ensure adequate spacing around the component and consider the context when choosing button sizes and colors.
Basic Usage
Simple pagination with default settings
Without First/Last Buttons
Pagination without first and last page navigation buttons
Without Page Numbers
Pagination with only navigation buttons
Custom Max Visible Pages
Pagination with custom maximum visible page numbers
Different Button Sizes
Pagination with different button sizes
Different Colors
Pagination with different color variants
Many Pages with Ellipsis
Pagination with many pages showing ellipsis for hidden pages
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
currentPage | number | - | The currently active page (1-indexed) |
totalPages | number | - | The total number of pages |
onPageChange | (page: number) => void | - | Callback fired when the page changes |
showFirstLast | boolean | true | Whether to show first and last page navigation buttons |
showPageNumbers | boolean | true | Whether to show page number buttons |
maxVisiblePages | number | 7 | Maximum number of page number buttons to display (3-9) |
buttonSize | "sm" | "md" | "lg" | "md" | Size of the pagination buttons |
color | "primary" | "secondary" | "destructive" | "neutral" | "neutral" | Color variant for the pagination buttons |
ariaLabel | string | "Pagination" | Accessibility label for the pagination navigation |
className | string | — | Additional CSS classes to apply to the component |