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
RTL Support Example
The Pagination component automatically adapts to RTL layouts. Previous/Next buttons and chevrons mirror correctly.
LTR (English)
RTL (العربية)
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 between pagination links
- Enter - Activate the focused page link
- Space - Activate the focused page 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
The Pagination component is fully RTL-compatible with automatic icon mirroring and layout adaptation.
- Previous/Next buttons swap positions in RTL mode
- Chevron icons mirror automatically
- Page number ordering follows reading direction
- Focus indicators position correctly