Components
Pagination
Page buttons for moving through paged content.
Pagination shows page buttons with previous and next steps. PaginationItem is one of those
buttons, for use in renderItem. usePagination builds the item list for custom controls.
import Pagination, { usePagination } from '@hone-ui/react/Pagination';
import PaginationItem from '@hone-ui/react/PaginationItem';Examples
<Pagination count={10} />
<Pagination count={10} color="primary" defaultPage={6} aria-label="results" />
<Pagination count={10} variant="outlined" shape="rounded" aria-label="outlined" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 1 | The number of pages. |
page, defaultPage | number | defaultPage: 1 | The current page, 1-based. |
onChange | (event, page) => void | Called with the click event and the page. | |
boundaryCount | number | 1 | Pages always shown at each end. |
siblingCount | number | 1 | Pages on each side of the current one. |
color | 'standard', 'primary', 'secondary' | 'standard' | The current page's color. |
variant | 'text', 'outlined' | 'text' | Borders on the items. |
shape | 'circular', 'rounded' | 'circular' | The item shape. |
size | 'small', 'medium', 'large' | 'medium' | The item size. |
disabled, hideNextButton, hidePrevButton, showFirstButton, showLastButton | boolean | false | Turn items on and off. |
renderItem | (item) => ReactNode | Renders each item. | |
getItemAriaLabel | (type, page, selected) => string | Names each item. | |
sx, className, style, ref | Standard. |
Notes
- PaginationItem does not take
component. Render your own element fromrenderItemfor router links. - The list keeps the same length while paging.
Accessibility
The root is a nav named "pagination navigation". The current page has aria-current="page".