Pagination

ページの切り替えに使用するコンポーネント。テーブルやリストの下部、フッターの上に配置します。アイコン版と「前へ / 次へ」テキスト版の 2 種類があります。

プレビュー

各サンプルは実際にクリックで動きます。ページ番号や前へ / 次へを押して、ハイライトの移動と先頭・最終ページでの Disabled の挙動を確認できます。

アイコン版 (Pager)

ページ番号 + 前後アイコンボタンの構成。スペースを取らずに済むため、テーブルや管理画面で多用します。

テキスト版

「前へ / 次へ」をテキストで表記する版。ECサイトなどユーザー向けの一覧画面に向いています。テキストボタンは長方形にしてクリック領域を広く確保しています。

import { useState } from "react";
import { Pagination } from "@/components/Pagination";

const [page, setPage] = useState(1);

<Pagination
  currentPage={page}
  totalPages={12}
  variant="icon"
  onChange={setPage}
/>

パーツ

内部で使われている各ボタンの単体表示。1 個ずつ配置するときの参考。

数字ボタン

Normal

Active

Disabled

省略記号

矢印ボタン (アイコン)

Normal

Disabled

前へ / 次へ (テキスト)

Normal

Disabled

仕様

ボタン (共通)

size (数字 / 矢印アイコン / 省略)32×32 (component/height&width/s)
size (前へ / 次へテキスト)高さ 32 × 幅 auto / min-width 56px / padding-x 8px
radius4px (pagination/button/radius)
border1px solid #D1D5DB
gap (ボタン間)8px (pagination/button/gap)
font14px / Medium (typography/size/size_s)

状態別の色

Normal bg / text#FFFFFF / #1F2937
Hover bgrgba(31, 41, 55, 0.08)
Active bg / text#0066CC / #FFFFFF
Active border#0066CC
Disabled text / iconrgba(31, 41, 55, 0.3)
Ellipsis text#6B7280 (text/secondary)
Ellipsis border / bgなし (透明)

並べ方のルール

先頭・末尾のページ番号は常に表示する
現在ページの前後 1 つを表示し、それ以外は … で省略
総ページ数が 7 以下のときは省略せず全件表示
先頭ページのときは前へ・最終ページのときは次へを Disabled にする

利用基準

使うべき時

テーブル・リストの下部、フッターの上に配置する
管理画面・データ表示にはアイコン版 (省スペース) を使う
ユーザー向け一覧画面にはテキスト版 (前へ / 次へ) を使う
現在ページを必ず Active 状態にする

使わない時

ページ数が極端に少ない (2~3 ページ) ときに使う → 全ページを直接並べる
1 画面内で複数の Pagination を並列に置く
次のページが存在しない状態でも「次へ」をクリック可能にする
Active 状態を同時に 2 つ以上にする

Figma

Pagination コンポーネントを開く ↗