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>
  <For each={["solid", "outline", "ghost", "unstyled"]}>
    {(variant, index) => (
      <Pagination key={index} total={10} variant={variant} />
    )}
  </For>
</VStack>

Copied!

Change Size

Editable example

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => <Pagination key={index} total={10} size={size} />}
  </For>
</VStack>

Copied!

Change Color Scheme

Editable example

<VStack>
  <For
    each={[
      { variant: "solid", colorScheme: "secondary" },
      { variant: "outline", colorScheme: "orange" },
      { variant: "ghost", colorScheme: "cyan" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Pagination
        key={index}
        total={10}
        variant={variant}
        colorScheme={colorScheme}
      />
    )}
  </For>
</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 disabled.

Editable example

<VStack>
  <For each={["solid", "outline", "ghost", "unstyled"]}>
    {(variant, index) => (
      <Pagination key={index} total={10} variant={variant} disabled />
    )}
  </For>
</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>
  <For
    each={[
      { props: { controlProps: { children: <GhostIcon /> } } },
      { props: { controlPrevProps: { children: <GhostIcon /> } } },
      { props: { controlNextProps: { children: <GhostIcon /> } } },
    ]}
  >
    {({ props }, index) => <Pagination key={index} total={10} {...props} />}
  </For>
</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>
  <For
    each={[
      { props: { edgeProps: { children: <GhostIcon /> } } },
      { props: { edgeFirstProps: { children: <GhostIcon /> } } },
      { props: { edgeLastProps: { children: <GhostIcon /> } } },
    ]}
  >
    {({ props }, index) => (
      <Pagination key={index} total={10} withEdges {...props} />
    )}
  </For>
</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