Pagination
Pagination components enable users to navigate through large sets of records by dividing content into discrete pages. They display page controls, a “Show N of Total records” indicator, and an optional page-size selector — all in a responsive layout that adapts between desktop and mobile.
In React, the Pagination component uses callback props (onPageChange, onPageSizeChange) for navigation events. The page-size selector uses the internal Radix-based DropdownMenu component.
In Vue, every navigation interaction fires the prop callback (onPageChange, onPageSizeChange) if provided and unconditionally emits the matching event (pageChange, pageSizeChange). Wire one or the other; wiring both will fire your handler twice. The page-size selector uses a native <select> element.
Loading Code Block...Full example
Section titled “Full example”A pagination control showing page 1, 10 items per page, out of 100 total records.
Loading Code Block...Variants
Section titled “Variants”The component supports two navigation layouts:
| Variant | Description |
|---|---|
default | Shows a sliding window of up to 5 page numbers around the current page |
last-number | Shows page 1, page N (last), and a ”…” dots menu for all pages in between |
Loading Code Block...Vue events
Section titled “Vue events”| Props | Default | Type | Description |
|---|---|---|---|
| pageChange | - | (page: number) => void | Emitted when the user navigates to a different page. |
| pageSizeChange | - | (size: number) => void | Emitted when the user selects a different page size. Also emits pageChange with value 1 to reset. |
Navigation controls
Section titled “Navigation controls”Both variants include the same set of navigation buttons:
| Button | Action |
|---|---|
« (double left chevron) | Jump to first page |
‹ (single left chevron) | Go to previous page |
| Page number buttons | Direct page navigation |
› (single right chevron) | Go to next page |
» (double right chevron) | Jump to last page |
All navigation buttons are disabled at their boundary — first/previous buttons are disabled on page 1, and next/last buttons are disabled on the final page.
Accessibility
Section titled “Accessibility”- All navigation buttons use semantic
<button>elements with properdisabledattributes - Disabled buttons receive
cursor-not-allowedstyling and prevent keyboard/click interaction - Page-size selector is keyboard accessible (Tab to focus, Enter/Space to open, Arrow keys to navigate)
- Active page button is visually distinguished with accent background and on-brand text colour
- Focus states are maintained through keyboard navigation