Pagination
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Container: The outermost
<ul>element with classpagination. - Pagination Item: Each page or control button, rendered as a child with class
pagination-item. - Active Item: The currently selected page, with class
active. - Control Buttons: Navigation controls (first, prev, next, last) with additional classes (
pagination-start,pagination-prev, etc.). - Menu: Overflow menu for page numbers, with class
pagination-menu. - Separator: Visual separator, with class
pagination-separator.
States
- Default: All items enabled, current page highlighted.
- Hovered: Item under mouse pointer, changes background/text color.
- Active/Selected: Current page, visually distinct.
- Disabled: Control buttons or items that cannot be interacted with (e.g., prev on first page).
- Focus: Keyboard focus ring on item.
Options
- bordered: Show border around pagination.
- color: 'neutral' | 'accent'.
- onlyControl: Show only navigation controls.
- siblings: Number of sibling page numbers to show.
- component: Custom component for page links.
- controlConfig: Custom config for control buttons.
Behaviors
- Supports keyboard navigation (ArrowLeft/ArrowRight to change page).
- Responsive layout for different container widths.
- Overflow handled with menu for large page counts.
- All navigation and page changes are accessible via keyboard and screen readers.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| 2025-06-03 | new | Initial design | Oanh Nguyen | PAR-52 |