Design SystemComponentsPagination

Pagination

Installation

import { Pagination } from "@olab/components";

Overview

一排 24px 見方的小頁碼，兩側各一個上一頁 / 下一頁箭頭。頁數多時，中間用「...」省略，只留目前頁前後幾頁與頭尾。

目前頁加上淡底、文字轉亮。在第一頁或最後一頁時，對應的箭頭會變淡，而且不能點。

Interactive Demo

CLICK A PAGE NUMBER — selected page reflects below

page = 1

State Matrix

PAGE ITEM — static snapshot

3default
3hover (sim)
3selected
...ellipsis
arrow · hover (sim)

ARROWS AT THE ENDS — real component

first page · prev disabled
last page · next disabled

Examples

SIBLING COUNT — siblingCount=0

SIBLING COUNT — siblingCount=2 (default)

SMALL SET — only 3 pages, no ellipsis

Spec

PartValueSource class
Page item24 × 24px，圓角 4pxh-6 w-6 rounded
Page item text14px（bodyM）text-bodyM text-tertiary
Page item · hover淡底hover:bg-secondary
Page item · selected淡底 + 亮文字data-[selected]:bg-secondary text-primary
Prev / next24 × 24px，內距 4px，箭頭 16pxh-6 w-6 p-1 · chevron size md
Prev / next · disabled60% 透明度，不能點data-[disabled]:opacity-60
Gap · page items2pxgap-0.5
Gap · arrows ↔ pages12pxgap-3
Siblings目前頁前後各 2 頁（預設）siblingCount = 2

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/pagination.md。

Usage

Do

  • 列表、表格的頁數切換；Table 開 pagination 時就是用這個。
  • 放在列表正下方、置中。
  • 版面窄的時候把 siblingCount 調小，讓整排不換行。

Don't

  • 不要拿來做步驟指示（第 1 步、第 2 步）；它只代表資料分頁。
  • 只有一頁時不要顯示。
  • 不要用 className 改目前頁的顏色；hover 與選中的底色同一階，目前頁靠文字變亮區分，這是已知限制（見 Spec 全文）。