'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationBasic = () => {
return (
<Pagination.Root count={20} pageSize={2} defaultPage={1}>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
Anatomy
import { Pagination } from '@saas-ui/react/pagination'<Pagination.Root>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.PageText />
<Pagination.NextTrigger />
</PaginationRoot>Examples
Sizes
Use the size prop to change the size of the pagination.
Button component sizes.'use client'
import { For, HStack, Stack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationWithSizes = () => {
return (
<Stack gap="8">
<For each={['xs', 'sm', 'md', 'lg']}>
{(size) => (
<Pagination.Root
key={size}
count={10}
pageSize={2}
defaultPage={1}
size={size}
>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)}
</For>
</Stack>
)
}
Variants
Use the variant prop to control the variant of the pagination items and
ellipsis.
The variant matches the Button component variant.
'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationWithVariants = () => {
return (
<Pagination.Root count={20} pageSize={2} defaultPage={1} variant="solid">
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
Controlled
Use the page and onPageChange props to control the current page.
'use client'
import { useState } from 'react'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationControlled = () => {
const [page, setPage] = useState(1)
return (
<Pagination.Root
count={20}
pageSize={2}
page={page}
onPageChange={(e) => setPage(e.page)}
>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
Sibling Count
Use siblingCount to control the number of sibling pages to show before and
after the current page.
'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationWithSiblingCount = () => {
return (
<Pagination.Root
count={200}
pageSize={10}
defaultPage={10}
siblingCount={2}
>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
Compact
Use the PaginationPageText to create a compact pagination. This can be useful
for mobile views.
'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationCompact = () => {
return (
<Pagination.Root count={20} pageSize={2} defaultPage={1}>
<HStack gap="4">
<Pagination.PrevTrigger />
<Pagination.PageText />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
As Link
Use the getHref prop to create a pagination that navigates via links. This
will use the LinkButton component to create the links.
LinkButton component to point to the correct framework link component
if needed.'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationAsLink = () => {
return (
<Pagination.Root
count={20}
pageSize={2}
defaultPage={1}
// getHref={(page) => `?page=${page}`}
>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
Attached
Here's an example of composing the pagination with the Group component to
attach the pagination items and triggers.
'use client'
import { Group } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationAttached = () => {
return (
<Pagination.Root count={10} pageSize={2} defaultPage={1} variant="solid">
<Group attached>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Group>
</Pagination.Root>
)
}
Count Text
Pass format=long to the PaginationPageText component to show the count text
'use client'
import { HStack } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
export const PaginationWithCountText = () => {
return (
<Pagination.Root count={50} pageSize={5} defaultPage={1} maxW="240px">
<HStack gap="4">
<Pagination.PageText format="long" flex="1" />
<Pagination.PrevTrigger />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
)
}
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
'use client'
import { useState } from 'react'
import { HStack, Stack, Text } from '@chakra-ui/react'
import { Pagination } from '@saas-ui/react'
const pageSize = 5
const count = 50
const items = new Array(count)
.fill(0)
.map((_, index) => `Lorem ipsum dolor sit amet ${index + 1}`)
export const PaginationWithContent = () => {
const [page, setPage] = useState(1)
const startRange = (page - 1) * pageSize
const endRange = startRange + pageSize
const visibleItems = items.slice(startRange, endRange)
return (
<Stack gap="4">
<Stack>
{visibleItems.map((item) => (
<Text key={item}>{item}</Text>
))}
</Stack>
<Pagination.Root
page={page}
count={count}
pageSize={pageSize}
onPageChange={(e) => setPage(e.page)}
>
<HStack>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</HStack>
</Pagination.Root>
</Stack>
)
}
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 |