Pagination

Pagination is a component for managing the pagination and navigation of content.

Import

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

Copied!

Usage

Editable example

<Pagination total={10} />

Copied!

Change Variant

Editable example

<VStack>
  <Pagination total={10} variant="solid" />
  <Pagination total={10} variant="outline" />
  <Pagination total={10} variant="ghost" />
  <Pagination total={10} variant="unstyled" />
</VStack>

Copied!

Change Size

Editable example

<VStack>
  <Pagination total={10} size="xs" />
  <Pagination total={10} size="sm" />
  <Pagination total={10} size="md" />
  <Pagination total={10} size="lg" />
  <Pagination total={10} size="xl" />
</VStack>

Copied!

Change Color Scheme

Editable example

<VStack>
  <Pagination total={10} variant="solid" colorScheme="secondary" />
  <Pagination total={10} variant="outline" colorScheme="orange" />
  <Pagination total={10} variant="ghost" colorScheme="cyan" />
</VStack>

Copied!

Add Edge Control Buttons

To add buttons to move to the first and last pages, set withEdges to true.

Editable example

<Pagination total={10} withEdges />

Copied!

Customize the Number of Siblings

If you want to change the number of pages displayed before and after the current page, set the desired number to siblings.

Editable example

<Pagination total={77} siblings={3} />

Copied!

Customize the Number of Boundaries

If you want to change the number of pages displayed at the beginning and the end, set the desired number to boundaries.

Editable example

<Pagination total={77} boundaries={3} />

Copied!

Disable Pagination

If you want to disable pagination, set isDisabled.

Editable example

<VStack>
  <Pagination total={10} variant="solid" isDisabled />
  <Pagination total={10} variant="outline" isDisabled />
  <Pagination total={10} variant="ghost" isDisabled />
  <Pagination total={10} variant="unstyled" isDisabled />
</VStack>

Copied!

Customize Control Buttons

controlProps: props that are set for both buttons.
controlPrevProps: props that are set for the previous button.
controlNextProps: props that are set for the next button.

Editable example

<VStack>
  <Pagination total={10} controlProps={{ children: <Ghost /> }} />
  <Pagination total={10} controlPrevProps={{ children: <Ghost /> }} />
  <Pagination total={10} controlNextProps={{ children: <Ghost /> }} />
</VStack>

Copied!

Customize Edge Control Buttons

edgeProps: props that are set for both buttons.
edgeFirstProps: props that are set for the first button.
edgeLastProps: props that are set for the last button.

Editable example

<VStack>
  <Pagination total={10} withEdges edgeProps={{ children: <Ghost /> }} />
  <Pagination total={10} withEdges edgeFirstProps={{ children: <Ghost /> }} />
  <Pagination total={10} withEdges edgeLastProps={{ children: <Ghost /> }} />
</VStack>

Copied!

Control

Editable example

const [page, onChange] = useState<number>(1)

return <Pagination page={page} total={10} onChange={onChange} />

Copied!

Edit this page on GitHub

PreviousBreadcrumb NextStepper