Pagination

Display active page and navigate between multiple pages

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Color

Size

Radius

With controls

With edges

<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`;
    }
  }}
/>