Pagination
Display active page and navigate between multiple pages
Import
Source
Docs
Package
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:
<Paginationtotal={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`;}}}/>
Built by Vitaly Rtishchev and these awesome people