v6.0.35

Pagination

Display active page and navigate between multiple pages
Import

Usage

Color
Shades
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
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.

Pagination component props

NameTypeDescription
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

NameTypeDescription
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

NameTypeDescription
dotsIcon
PaginationIcon
Dots icon component

Pagination component Styles API

NameStatic selectorDescription
control.asuikit-Pagination-controlControl element: items, next/previous, first/last buttons
dots.asuikit-Pagination-dotsDots icon wrapper