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

Disabled

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

Styles API

You can use data-active attribute on item selector to change styles of selected item:

import { Pagination } from '@mantine/core';

function Demo() {
  return (
    <Pagination
      total={10}
      position="center"
      styles={(theme) => ({
        item: {
          '&[data-active]': {
            backgroundImage: theme.fn.gradient({ from: 'red', to: 'yellow' }),
          },
        },
      })}
    />
  );
}

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.

Go back

NavLink – @mantine/core

Up next

Stepper – @mantine/core

Pagination component props

Name	Type	Description
align	AlignItems	Defines align-items css property
boundaries	number	Amount of elements visible on left/right edges
color	MantineColor	Active item color from theme, defaults to theme.primaryColor
disabled	boolean	Determines whether all controls should be disabled
getItemAriaLabel	(page: number \| "first" \| "last" \| "dots" \| "next" \| "prev") => string	Callback to control aria-labels
grow	boolean	Defines flex-grow property for each element, true -> 1, false -> 0
initialPage	number	Active initial page for uncontrolled component
itemComponent	FC<PaginationItemProps>	Change item component
noWrap	boolean	Defined flex-wrap property
onChange	(page: number) => void	Callback fired after change of each page
page	number	Controlled active page number
position	"left" \| "right" \| "center" \| "apart"	Defines justify-content property
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Predefined item radius or number to set border-radius in px
siblings	number	Siblings amount on left/right side of selected page
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Predefined item size or number to set width and height in px
spacing	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Spacing between items from theme or number to set value in px, defaults to theme.spacing.xs / 2
total^*	number	Total amount of pages
withControls	boolean	Show/hide prev/next controls
withEdges	boolean	Show/hide jump to start/end controls