Pagination
Used to navigate through a series of pages.
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.
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.
Lorem ipsum dolor sit amet 1
Lorem ipsum dolor sit amet 2
Lorem ipsum dolor sit amet 3
Lorem ipsum dolor sit amet 4
Lorem ipsum dolor sit amet 5
Props
Root
| Prop | Default | Type |
|---|---|---|
defaultPage | 1 | numberThe initial active page when rendered. Use when you don't need to control the active page of the pagination. |
defaultPageSize | 10 | numberThe initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination. |
siblingCount | 1 | numberNumber of pages to show beside active page |
type | 'button' | 'button' | 'link'The type of the trigger element |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
count | numberTotal number of data items | |
ids | Partial<{
root: string
ellipsis: (index: number) => string
prevTrigger: string
nextTrigger: string
item: (page: number) => string
}>The ids of the elements in the accordion. Useful for composition. | |
onPageChange | (details: PageChangeDetails) => voidCalled when the page number is changed | |
onPageSizeChange | (details: PageSizeChangeDetails) => voidCalled when the page size is changed | |
page | numberThe controlled active page | |
pageSize | numberThe controlled number of data items per page | |
translations | IntlTranslationsSpecifies the localized strings that identifies the accessibility elements and their states |