Pagination

Display active page and navigate between multiple pages

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

Color

Shades

Size

Radius

With controls

With edges

Disabled

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

function Demo() {
  return <Pagination total={10} />;
}

Controlled

To control component state provide value and onChange props:

import { useState } from 'react';
import { Pagination } from '@asuikit/core';

function Demo() {
  const [activePage, setPage] = useState(1);
  return <Pagination value={activePage} onChange={setPage} total={10} />;
}

Siblings

Control number of active item siblings with siblings prop:

1 sibling (default)

2 siblings

3 siblings

import { Text, Pagination } from '@asuikit/core';

function Demo() {
  return (
    <>
      <Text mb="xs">1 sibling (default)</Text>
      <Pagination total={20} siblings={1} defaultValue={10} />

      <Text mb="xs" mt="xl">2 siblings</Text>
      <Pagination total={20} siblings={2} defaultValue={10} />

      <Text mb="xs" mt="xl">3 siblings</Text>
      <Pagination total={20} siblings={3} defaultValue={10} />
    </>
  );
}

Boundaries

Control number of items displayed after previous and before next buttons with boundaries prop:

1 boundary (default)

2 boundaries

3 boundaries

import { Text, Pagination } from '@asuikit/core';

function Demo() {
  return (
    <>
      <Text mb="xs">1 boundary (default)</Text>
      <Pagination total={20} boundaries={1} defaultValue={10} />

      <Text mt="xl" mb="xs">2 boundaries</Text>
      <Pagination total={20} boundaries={2} defaultValue={10} />

      <Text mt="xl" mb="xs">3 boundaries</Text>
      <Pagination total={20} boundaries={3} defaultValue={10} />
    </>
  );
}

Styles API

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

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

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

Compound components

You can use the following compound components to have full control over the Modal rendering:

Pagination.Root – context provider
Pagination.Items – items list
Pagination.Next – next control
Pagination.Previous – previous control
Pagination.First – first control
Pagination.Last – last control

import { Group, Pagination } from '@asuikit/core';

function Demo() {
  return (
    <Pagination.Root total={10}>
      <Group spacing={5} position="center">
        <Pagination.First />
        <Pagination.Previous />
        <Pagination.Items />
        <Pagination.Next />
        <Pagination.Last />
      </Group>
    </Pagination.Root>
  );
}

Controls as links

import { Group, Pagination } from '@asuikit/core';

function Demo() {
  return (
    <>
      {/* Regular pagination */}
      <Pagination
        total={10}
        position="center"
        withEdges
        getItemProps={(page) => ({
          component: 'a',
          href: `#page-${page}`,
        })}
        getControlProps={(control) => {
          if (control === 'first') {
            return { component: 'a', href: '#page-0' };
          }

          if (control === 'last') {
            return { component: 'a', href: '#page-10' };
          }

          if (control === 'next') {
            return { component: 'a', href: '#page-2' };
          }

          if (control === 'previous') {
            return { component: 'a', href: '#page-1' };
          }

          return {};
        }}
      />

      {/* Compound pagination */}
      <Pagination.Root
        total={10}
        getItemProps={(page) => ({
          component: 'a',
          href: `#page-${page}`,
        })}
      >
        <Group spacing={7} position="center" mt="xl">
          <Pagination.First component="a" href="#page-0" />
          <Pagination.Previous component="a" href="#page-1" />
          <Pagination.Items />
          <Pagination.Next component="a" href="#page-2" />
          <Pagination.Last component="a" href="#page-10" />
        </Group>
      </Pagination.Root>
    </>
  );
}

Change icons

import { Group, Pagination } from '@asuikit/core';
import {
  IconArrowBarToRight,
  IconArrowBarToLeft,
  IconArrowLeft,
  IconArrowRight,
  IconGripHorizontal,
} from '@tabler/icons-react';

function Demo() {
  return (
    <>
      {/* Regular pagination */}
      <Pagination
        total={10}
        position="center"
        withEdges
        nextIcon={IconArrowRight}
        previousIcon={IconArrowLeft}
        firstIcon={IconArrowBarToLeft}
        lastIcon={IconArrowBarToRight}
        dotsIcon={IconGripHorizontal}
      />

      {/* Compound pagination */}
      <Pagination.Root total={10}>
        <Group spacing={7} position="center" mt="xl">
          <Pagination.First icon={IconArrowBarToLeft} />
          <Pagination.Previous icon={IconArrowLeft} />
          <Pagination.Items dotsIcon={IconGripHorizontal} />
          <Pagination.Next icon={IconArrowRight} />
          <Pagination.Last icon={IconArrowBarToRight} />
        </Group>
      </Pagination.Root>
    </>
  );
}

use-pagination hook

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

Go back

NavLink – @asuikit/core

Up next

Stepper – @asuikit/core

Pagination component props

Name	Type	Description
align	AlignItems	Defines align-items css property
boundaries	number	Number of elements visible on the left/right edges, 1 by default
color	MantineColor	Key of theme.colors, active item color, theme.primaryColor by default
defaultValue	number	Active page for uncontrolled component, must be an integer in [0, total] interval
disabled	boolean	Determines whether all controls should be disabled, false by default
dotsIcon	PaginationIcon	Dots icon component
firstIcon	PaginationIcon	First control icon component
getControlProps	(control: "first" \| "last" \| "next" \| "previous") => Record<string, any>	Adds props to next/previous/first/last controls
getItemProps	(page: number) => Record<string, any>	Add additional props to items
grow	boolean	Defines flex-grow property for each element, true -> 1, false -> 0
lastIcon	PaginationIcon	Last control icon component
nextIcon	PaginationIcon	Next control icon component
noWrap	boolean	Defined flex-wrap property
onChange	(value: number) => void	Called when page changes
onFirstPage	() => void	Called when first page control is clicked
onLastPage	() => void	Called when last page control is clicked
onNextPage	() => void	Called when next page control is clicked
onPreviousPage	() => void	Called when previous page control is clicked
position	"left" \| "right" \| "center" \| "apart"	Defines justify-content property
previousIcon	PaginationIcon	Previous control icon component
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius, border-radius of items and controls, theme.defaultRadius by default
siblings	number	Number of siblings displayed on the left/right side of selected page, 1 by default
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Controls height and min-width
spacing	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Space between elements
total^*	number	Total number of pages, must be an integer
value	number	Active page for controlled component, must be an integer in [0, total] interval
withControls	boolean	Determines whether next/previous controls should be rendered, true by default
withEdges	boolean	Determines whether first/last controls should be rendered, false by default

Pagination.Root component props

Name	Type	Description
boundaries	number	Number of elements visible on the left/right edges, 1 by default
children	ReactNode	Pagination content
color	MantineColor	Key of theme.colors, active item color, theme.primaryColor by default
defaultValue	number	Active page for uncontrolled component, must be an integer in [0, total] interval
disabled	boolean	Determines whether all controls should be disabled, false by default
getItemProps	(page: number) => Record<string, any>	Add additional props to items
onChange	(value: number) => void	Called when page changes
onFirstPage	() => void	Called when first page control is clicked
onLastPage	() => void	Called when last page control is clicked
onNextPage	() => void	Called when next page control is clicked
onPreviousPage	() => void	Called when previous page control is clicked
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius, border-radius of items and controls, theme.defaultRadius by default
siblings	number	Number of siblings displayed on the left/right side of selected page, 1 by default
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Controls height and min-width
total^*	number	Total number of pages, must be an integer
value	number	Active page for controlled component, must be an integer in [0, total] interval

Pagination.Items component props

Name	Type	Description
dotsIcon	PaginationIcon	Dots icon component

Pagination component Styles API

Name	Static selector	Description
control	.asuikit-Pagination-control	Control element: items, next/previous, first/last buttons
dots	.asuikit-Pagination-dots	Dots icon wrapper

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter