Pagination

Display active page and navigate between multiple pages
Import

Usage

Color
Size
Radius
<Pagination total={10} />

Controlled

To control component state provide page and onChange props:

import { useState } from 'react';
import { Pagination } from '@mantine/core';
function Demo() {
const [activePage, setPage] = useState(1);
return <Pagination page={activePage} onChange={setPage} />;
}

Siblings

Control amount of active item siblings with siblings prop:

1 sibling (default)
2 siblings
3 siblings
<Pagination total={20} siblings={3} />

Boundaries

Control amount of items displayed after previous and before next buttons with boundaries prop:

1 boundary (default)
2 boundaries
3 boundaries
<Pagination total={20} boundaries={3} />

Accessibility

Pagination renders a regular button element. To include aria-label for screen reader support provide getItemAriaLabel function to generate aria-labels:

<Pagination
total={20}
getItemAriaLabel={(page) => {
switch (page) {
case 'dots':
return 'dots element aria-label';
case 'prev':
return 'previous page button aria-label';
case 'next':
return 'next page button aria-label';
default:
return `${page} item aria-label`;
}
}}
/>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback