Pagination

Display active page and navigate between multiple pages
Import

Usage

Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Pagination } from '@mantine/core';
function Demo() {
return <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} total={10} />;
}

Siblings

Control amount of active item siblings with siblings prop:

1 sibling (default)
2 siblings
3 siblings
import { Text, Pagination } from '@mantine/core';
function Demo() {
return (
<>
<Text mb={10}>1 sibling (default)</Text>
<Pagination total={20} siblings={1} initialPage={10} />
<Text mb={10} mt={30}>
2 siblings
</Text>
<Pagination total={20} siblings={2} initialPage={10} />
<Text mb={10} mt={30}>
3 siblings
</Text>
<Pagination total={20} siblings={3} initialPage={10} />
</>
);
}

Boundaries

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

1 boundary (default)
2 boundaries
3 boundaries
import { Text, Pagination } from '@mantine/core';
function Demo() {
return (
<>
<Text mb={10}>1 boundary (default)</Text>
<Pagination total={20} boundaries={1} initialPage={10} />
<Text mt={30} mb={10} style={{ marginTop: 30, marginBottom: 10 }}>
2 boundaries
</Text>
<Pagination total={20} boundaries={2} initialPage={10} />
<Text mt={30} mb={10}>
3 boundaries
</Text>
<Pagination total={20} boundaries={3} initialPage={10} />
</>
);
}

Accessibility

Pagination renders a div with the role of "navigation". Inside are regular button elements. To include aria-labels for screen reader support, you can provide an aria-label to the Pagination component itself. To provide aria-labels to the actions inside the component, use the getItemAriaLabel function to generate aria-labels:

<Pagination
aria-label="my pagination component"
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';
case 'first':
return 'first page button aria-label';
case 'last':
return 'last page button aria-label';
default:
return `${page} item aria-label`;
}
}}
/>

The current active page will have the attribute aria-current="page".

use-pagination hook

If you need more flexibility @mantine/hooks exports use-pagination hook, you can use it to create your own pagination component.