7onicDESIGN 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}>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous />
    </Pagination.Item>
    <Pagination.Items />
    <Pagination.Item>
      <Pagination.Next />
    </Pagination.Item>
  </Pagination.Content>
</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)

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

<Pagination total={20} defaultValue={10} withEdges>
  <Pagination.Content>
    <Pagination.Item><Pagination.First /></Pagination.Item>
    <Pagination.Item><Pagination.Previous /></Pagination.Item>
    <Pagination.Items />
    <Pagination.Item><Pagination.Next /></Pagination.Item>
    <Pagination.Item><Pagination.Last /></Pagination.Item>
  </Pagination.Content>
</Pagination>

Loop Navigation (loop)

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

<Pagination total={5} defaultValue={5} loop>
  <Pagination.Content>
    <Pagination.Item><Pagination.Previous /></Pagination.Item>
    <Pagination.Items />
    <Pagination.Item><Pagination.Next /></Pagination.Item>
  </Pagination.Content>
</Pagination>

Disabled State

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

<Pagination total={10} defaultValue={3} disabled>
  <Pagination.Content>
    <Pagination.Item><Pagination.Previous /></Pagination.Item>
    <Pagination.Items />
    <Pagination.Item><Pagination.Next /></Pagination.Item>
  </Pagination.Content>
</Pagination>

Custom Icons

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

<Pagination total={10} defaultValue={5}>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous icon={
        <svg className="icon-sm" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      } />
    </Pagination.Item>
    <Pagination.Items />
    <Pagination.Item>
      <Pagination.Next icon={
        <svg className="icon-sm" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      } />
    </Pagination.Item>
  </Pagination.Content>
</Pagination>

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

最後→最初のループ移動

Pagination.Link

pageundefined
number

遷移先のページ番号

isActiveauto
boolean

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

Pagination.Previous / Pagination.Next / Pagination.First / Pagination.Last

iconBuilt-in SVG icon
ReactNode

カスタムアイコン

Anatomy

1
2
3
Prev
4
1
7
…
4
5
5
6
…
10
6
Next
Height36px
Min widthmin-w-9
Gapgap-1
Iconicon-sm
1
Root
navコンテナ
2
Content
フレックスリスト
3
Prev / Next
前後ボタン
4
Page Item
ページ番号
5
Active Page
現在ページ
6
Ellipsis
省略記号

Best Practices

✓

推奨

  • ✓データの総件数が多い場合にページネーションを使用する
  • ✓現在のページ位置を明確に表示する
  • ✓siblings・boundariesで適切なページ範囲を設定する
  • ✓大量ページの場合はwithEdgesで先頭・末尾ジャンプを提供する
✕

避けるべき

  • ✗少量のデータにページネーションを使わない（全件表示推奨）
  • ✗ページ遷移時にスクロール位置をリセットしない
  • ✗全ページ番号を一度に表示しない（siblings/boundariesを活用）
  • ✗無限スクロールとの併用は避ける

Accessibility

キーボード操作

すべてのページボタンはTabキーでフォーカス移動でき、EnterまたはSpaceで選択できます。 disabled状態ではフォーカスが当たりません。

ARIA / WCAG

  • role="navigation" nav要素に設定
  • aria-label="pagination" ナビゲーション識別
  • aria-current="page" 現在ページに設定
  • aria-label="Go to page N" 各ボタンに設定
  • default 36px、lg 40px以上 (WCAG 2.5.8準拠)
  • aria-hidden="true" Ellipsisに設定