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

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

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