Pagination
Display active page and navigate between multiple pages
Import
Source
Docs
Package
Usage
Example with chunked content
id: 0, name: mantine-ye1zghb0v
id: 1, name: mantine-c3hycz465
id: 2, name: mantine-9yjshb1yt
id: 3, name: mantine-1wh94cswr
id: 4, name: mantine-ygb7qxtwh
Controlled
To control component state provide value
and onChange
props:
Siblings
Control number of active item siblings with siblings
prop:
1 sibling (default)
2 siblings
3 siblings
Boundaries
Control number of items displayed after previous and before next buttons with boundaries
prop:
1 boundary (default)
2 boundaries
3 boundaries
Styles API
Pagination
supports Styles API, you can add styles to any inner element of the component withclassNames
prop. Follow Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
Compound components
You can use the following compound components to have full control over the Pagination
rendering:
Pagination.Root
– context providerPagination.Items
– items listPagination.Next
– next controlPagination.Previous
– previous controlPagination.First
– first controlPagination.Last
– last control
Controls as links
Change icons
autoContrast
Pagination
supports autoContrast
prop and theme.autoContrast. If autoContrast
is set either on Pagination
or on theme, content color will be adjusted to have sufficient contrast with the value specified in color
prop.
Note that autoContrast
feature works only if you use color
prop to change background color.
autoContrast: off
autoContrast: on
use-pagination hook
If you need more flexibility @mantine/hooks
package exports use-pagination hook,
you can use it to create custom pagination components.