Pagination

Usage

import { Pagination } from "@chakra-ui/react"

<Pagination.Root>
  <Pagination.PrevTrigger />
  <Pagination.Ellipsis />
  <Pagination.Item />
  <Pagination.PageText />
  <Pagination.NextTrigger />
</Pagination.Root>

Shortcuts

The Pagination component also provides a set of shortcuts for common use cases.

PaginationItems

This component renders the number of pages based on the count and pageSize props.

Rendering this:

<Pagination.Items />

is shorthand for this:

<Pagination.Context>
  {({ pages }) =>
    pages.map((page, index) =>
      page.type === "page" ? (
        <Pagination.Item key={index} {...page} />
      ) : (
        <Pagination.Ellipsis key={index} index={index} />
      ),
    )
  }
</Pagination.Context>

Examples

Sizes

Use the size prop to change the size of the pagination.

:::info

The pagination sizes are mapped to the Button component sizes.

:::

Variants

Use the variant prop to control the variant of the pagination items and ellipsis.

The variant matches the Button component variant.

Controlled

Use the page and onPageChange props to control the current page.

Sibling Count

Use siblingCount to control the number of sibling pages to show before and after the current page.

Compact

Use the Pagination.PageText to create a compact pagination. This can be useful for mobile views.

As Link

Here's an example of rendering the pagination as links.

Attached

Here's an example of composing the pagination with the Group component to attach the pagination items and triggers.

Count Text

Pass format="long" to the Pagination.PageText component to show the count text.

Data Driven

Here's an example of controlling the pagination state and using the state to chunk the data.

Props

Root