Pagination
Navigate 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