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

use-pagination hook

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

TypeScript

Component props type

Import component props type:

import type { PaginationProps } from '@mantine/core';

PaginationProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

PaginationStylesNames type

PaginationStylesNames type is a union with Pagination Styles API names:

import type { PaginationStylesNames } from '@mantine/core';
const paginationClasses: Partial<Record<PaginationStylesNames, 'string'>> = {
item: 'pagination-item',
active: 'pagination-active',
};
<Pagination classNames={paginationClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
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