KARAKURIDESIGN SYSTEM

Pagination

Paginationは、大量のデータやコンテンツをページ単位で分割し、ユーザーが任意のページに移動できるナビゲーションコンポーネントです。 表示するページ数の幅や端の範囲を細かく設定でき、省略記号（…）を含むページ範囲を自動で計算します。

3
Variants
5
Sizes
4
Navigation
Pure
React

Playground

Preview
DdefaultPage 1/20
Variant
Color
Size
Radius
Pages
Options
const [page, setPage] = useState(1)

<Pagination total={20} value={page} onChange={setPage}>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>
    <PaginationItems />
    <PaginationItem>
      <PaginationNext />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Variants

Default
アクティブページにソリッド背景で塗りつぶし。最も一般的なスタイル。
標準UI
Outline
ボーダー付き。アクティブはソリッド背景で塗りつぶし。
フォーム・リスト
Ghost
アクティブは控えめなハイライト。最小限の視覚的存在感。
補助UI

Sizes

xs
高さ28px
フォント12px
アイコン14px
sm
高さ32px
フォント13px
アイコン14px
default
高さ36px
フォント14px
アイコン16px
lg
高さ40px
フォント14px
アイコン16px
xl
高さ48px
フォント16px
アイコン16px

Features

Edge Navigation (withEdges)

先頭・末尾へのジャンプボタンを表示。大量ページで素早く移動。

Loop Navigation (loop)

最後→最初、最初→最後の循環ナビゲーション。

Disabled State

全操作を無効化。データ読み込み中などに使用。

Custom Icons

icon propで内蔵アイコンを任意のReactNodeに差し替え。

API

Component Structure

Pagination— Pure React
.Content.Item.LinkProps.PreviousProps.NextProps.FirstProps.LastProps.Ellipsis.Items

Props

Pagination

total1
number

総ページ数

valueundefined
number

現在のページ（制御モード）

defaultValue1
number

初期ページ（非制御モード）

onChangeundefined
(page: number) => void

ページ変更時のコールバック

siblings1
number

現在ページの両側に表示するページ数

boundaries1
number

先頭・末尾に常に表示するページ数

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

コンポーネントのサイズ (28/32/36/40/48px)

variant"default"
"default" | "outline" | "ghost"

ビジュアルバリアント

color"default"
"default" | "primary"

アクティブページの色

radius"md"
"sm" | "base" | "md" | "lg" | "xl" | "full"

ボーダーの角丸

disabledfalse
boolean

全操作を無効化

withControlstrue
boolean

前へ・次へボタンの表示

withEdgesfalse
boolean

最初・最後ジャンプボタンの表示

loopfalse
boolean

最後→最初のループ移動

PaginationLink

pageundefined
number

遷移先のページ番号

isActiveauto
boolean

アクティブ状態（省略時はContextから自動判定）

PaginationPrevious / PaginationNext / PaginationFirst / PaginationLast

iconBuilt-in SVG icon
ReactNode

カスタムアイコン