Pagination

Used to navigate through a series of pages.

'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.

info

The pagination sizes are mapped to the 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.

info

Edit the 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
`count` *		`number` Total number of data items
`page`	`'1'`	`number` The active page
`pageSize`	`'10'`	`number` Number of data items per page
`siblingCount`	`'1'`	`number` Number of pages to show beside active page
`type`	`'\'button\''`	`'button' \| 'link'` The type of the trigger element
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultPage`		`number` The initial page of the pagination when it is first rendered. Use when you do not need to control the state of the pagination.
`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) => void` Called when the page number is changed
`onPageSizeChange`		`(details: PageSizeChangeDetails) => void` Called when the page size is changed
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states

Number Input

Password Input

Pagination

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Anatomy

Anatomy