Pagination
View on StorybookStorybookNavigate through pages of content. Fully responsive with automatic RTL support for navigation arrows.
Preview
Installation
Usage
Examples
With Ellipsis
Controlled
Current page: 2
Props
| Name | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | Whether this page is the currently active page |
size | "default" | "sm" | "lg" | "icon" | "icon" | The size variant of the pagination link |
Accessibility
Keyboard Navigation
- Tab - Move focus to the active tab
- Enter - Activate the focused link
- Space - Activate the focused link
ARIA Attributes
- role="navigation" with aria-label="pagination"
- aria-current="page" on the active page link
- aria-label on Previous and Next buttons for screen readers
- aria-hidden on ellipsis with descriptive sr-only text
RTL Considerations
Pagination arrows automatically flip direction in RTL layouts.
- Previous/Next buttons swap positions in RTL mode
- Chevron icons mirror automatically
- Page number ordering follows reading direction
- Focus indicators position correctly
Use Cases
Table and list navigation
Search results pages
Blog post archives
Image gallery navigation
Best Practices
Do
- ✓ Show current page and total pages
- ✓ Provide first/last page shortcuts
- ✓ Keep pagination visible and accessible
Don't
- ✗ Don't show too many page numbers — use ellipsis
- ✗ Don't reset scroll position without indication
- ✗ Don't hide pagination when there's only one page