'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Pagination
Move through pages of results, with the long middle collapsed.
Ant Design: Pagination
import { Pagination } from '@alea/ui';
Examples
Pagination
The long middle collapses around the current page.
Page 6 of 24
Compact
For phones and tight toolbars.
Props
Pagination props
Move through pages of results. The current page is marked for screen readers.
| Prop | Type | Default | Description |
|---|---|---|---|
onChangerequired | (page: number) => void | - | Called with the new page number. |
pagerequired | number | - | Current page, from 1. |
totalrequired | number | - | Total pages. |
appearance | "pages" | "compact" | 'pages' | compact shows "3 of 12" between the arrows instead of page numbers. |
aria-label | string | - | Name for screen readers. Default "Pagination". |
className | string | - | Extra class names for the root element. |
siblings | number | 1 | Pages shown on each side of the current one. Default 1. |
Accessibility
- A navigation landmark; each page button is named "Page n" and the current one has aria-current.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves between page buttons |
| Enter or Space | Goes to that page |
Do and don't
Do
- Keep the total visible.
- Use compact on narrow screens.
Don't
- Don't paginate short lists: show them all or load more.