---
title: "ページネーション"
description: "1 つのリストの番号付きのページを移動します。現在のページに印を付けたページ番号、前と次、必要に応じて最初と最後、そして何ページ中の何ページかを示す短い形があります。"
url: "https://tanrei.chnotchy.com/ja/components/pagination/"
last_updated: 2026-10-23T21:17:12.000Z
---

# ページネーション

> 1 つのリストの番号付きのページを移動します。現在のページに印を付けたページ番号、前と次、必要に応じて最初と最後、そして何ページ中の何ページかを示す短い形があります。

## 概要

ページネーションは、1 つのリストを番号でめくります。検索結果、ブログの投稿、テーブルの行などです。ガイドの章のように、タイトルのあるページが続く並びの中で前後のページへ進むものは[前後のリンク](https://tanrei.chnotchy.com/ja/components/previous-next-links/)です。タイトルは行き先を語りますが、ページ番号は語りません。

### 使い方

現在のページと、全部で何ページあるかを渡します。どの番号を表示するかは、ページネーションが決めます。`href` があれば、どのページもそれぞれのアドレスへのリンクになります。なければページはボタンになり、ページが変わったときに表示内容を変えるのはプロダクトです。

**Web**

```html
<!-- リンク: 各ページには、ブックマークや共有、新しいタブで開けるアドレスがあります。{page} にはページ番号が入ります。 -->
<tanrei-pagination label="検索結果のページ" page="3" count="12" href="/results/?page={page}"
  previous-label="前のページ" next-label="次のページ" page-label="{page} ページ"></tanrei-pagination>

<!-- ボタン: ページはその場で変わります。要素は自分の page を変えてから change を発行します。キャンセルするとページはそのままです。 -->
<tanrei-pagination id="pages" label="ページ" page="1" count="10"
  previous-label="前のページ" next-label="次のページ" page-label="{page} ページ"></tanrei-pagination>

<script type="module">
  import '@tanrei/web/components/pagination';
  document.querySelector('#pages').addEventListener('change', (e) => showPage(e.detail.page));
</script>
```

**React**

```tsx
import { Pagination } from '@tanrei/react';

<Pagination label="ページ" page={page} count={10}
  previousLabel="前のページ" nextLabel="次のページ" pageLabel="{page} ページ"
  onChange={(e) => setPage(e.detail.page)} />
```

SwiftUI、Compose、Flutter、React Native は計画中です。このページの冒頭で各プラットフォームに添えた名前は仕様が定めたもので、まだ提供していません。

言葉はプロダクトのものです。Tanrei は言葉を同梱しません。要素ごとに渡すか、`setWords()` でプロダクト全体に一度だけ渡します（`previousPageLabel`、`nextPageLabel`、`firstPageLabel`、`lastPageLabel`、`pageLabel`、`pageCountText`）。

## 仕様

- **表示する番号。** 最初と最後のページ（`boundaries`、既定は 1）、現在のページとその両側の 1 ページずつ（`siblings`、既定は 1）です。その間で省いたページは 1 つの省略記号になります。端に近いときは反対側に多くのページを表示するので、どのページでも行の場所の数は同じで、行の幅も変わりません。
- **現在のページ**は塗りつぶして描かれ、現在のものとして公開されます。現在のページを押しても何も起きません。
- **前と次**はアイコンだけです。最初のページと最後のページでは無効になり、場所はそのまま残ります。`first-last` を付けると、その外側に**最初と最後**が描かれます。
- **短い形**（`variant="compact"`）は、前と次の間にプロダクトの文「10 ページ中 3 ページ」を描きます。文がないときは 2 つの数字をスラッシュでつないだ「3 / 10」を描き、開発ビルドでは言葉が足りないことを報告します。番号付きの形は、与えられた幅に収まらないとき、自分で短い形になります。
- **2 つのサイズ**: `medium`（40）と `small`（32）。`small` は[テーブル](https://tanrei.chnotchy.com/ja/components/table/)のステータス行のような詰まった場所のためのものです。
- **右から左**では、行は右から並び、矢印は反転します。数字は、ページの言語の数字で描かれます。

- Category: Navigation
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/pagination/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/pagination.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-pagination>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/pagination`).
- React: `Pagination` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-pagination` | alpha |
| SwiftUI | `TanreiPagination` | planned |
| Jetpack Compose | `TanreiPagination` | planned |
| Flutter | `TanreiPagination` | planned |
| React Native | `Pagination` | planned |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `label` (prop) | `label` | `label` | `contentDescription` | `semanticLabel` | `accessibilityLabel` |
| `firstLast` (prop) | `firstLast` | `showsFirstLast` | `showFirstLast` | `showFirstLast` | `showFirstLast` |
| `href` (prop) | `href` | `destination` | `hrefFor` | `hrefFor` | `hrefFor` |
| `change` (event) | `change` | `onChange` | `onPageChange` | `onPageChanged` | `onPageChange` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `root`: The navigation landmark: as wide as its layout gives it, holding one row of items at its start edge. It draws nothing of its own.
- `item`: One place of the row that can be pressed: a page, or one of the controls first, previous, next and last. As high as its size, at least as wide, and where hover, focus and press are drawn.
- `label`: A page's number, in the digits of the language of where the pagination is used.
- `icon`: The arrow of a control, from the system's icon set: first_page, chevron_left, chevron_right and last_page. Decorative; mirrored in a right-to-left layout by the icon helper.
- `ellipsis` (optional): The mark that stands for the pages left out, in a place as wide as an item. It is not a control and is hidden from assistive technology.
- `count` (optional): The short form's sentence, between previous and next: which page of how many ("Page 3 of 10").
- `focus-ring`: The indicator shown for keyboard focus, around an item.

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | `""` | `label` | The accessible name of the landmark ("Pages", "Search results pages"), in the product's language. Tanrei ships no words of its own. It tells this landmark from the page's other navigation, so it is required. |
| `page` | `number` | `1` | `page` | The current page, counted from 1. Activating another page sets it (PGN-7). |
| `count` | `number` | `1` | `count` | How many pages there are. Below 1 the pagination draws nothing (PGN-3). |
| `siblings` | `number` | `1` | `siblings` | How many pages are shown on each side of the current page in the numbered form (PGN-2). |
| `boundaries` | `number` | `1` | `boundaries` | How many pages are always shown at the start and at the end of the numbered form (PGN-2). |
| `variant` | `enum`: `numbered`, `compact` | `"numbered"` | `variant` | numbered: the page numbers, with the controls on either side; it draws the compact form where its row does not fit (PGN-11). compact: the controls and the sentence that says which page of how many, never the numbers — for a narrow place, a table's status line, or a list whose pages are not reached by number. |
| `size` | `enum`: `small`, `medium` | `"medium"` | `size` | An item's height (32 / 40 under the default system). small is for a dense place, such as the status line of a compact table. The hit area always meets the minimum target. A design system may add sizes. |
| `firstLast` | `boolean` | `false` | `first-last` | Draws first and last on either side of previous and next, for a list long enough that its ends are worth a control of their own. |
| `href` | `string` | `""` | `href` | The address of a page, with the place {page}, which the pagination fills with the page's number ("/results/?page={page}"). Not empty, every page and every control is a link to its page's address (PGN-6). Empty, they are buttons, and the product changes what is shown when the page changes (PGN-7). |
| `previousLabel` | `string` | `""` | `previous-label` | The previous control's accessible name ("Previous page"). Empty reads the product's words. Required. |
| `nextLabel` | `string` | `""` | `next-label` | The next control's accessible name ("Next page"). Empty reads the product's words. Required. |
| `firstLabel` | `string` | `""` | `first-label` | The first control's accessible name ("First page"). Empty reads the product's words. Required while firstLast is true. |
| `lastLabel` | `string` | `""` | `last-label` | The last control's accessible name ("Last page"). Empty reads the product's words. Required while firstLast is true. |
| `pageLabel` | `string` | `""` | `page-label` | A page's accessible name, with the place {page}, which the pagination fills with the page's number as it draws it ("Page {page}", "{page}ページ"). Empty reads the product's words; where neither gives one, a page is named by its number alone. |
| `countText` | `string` | `""` | `count-text` | The short form's sentence, which the product writes whole in its own language with two places the pagination fills: {page} with the current page and {count} with the number of pages ("Page {page} of {count}", "{count}ページ中{page}ページ"). Empty reads the product's words; where neither gives one, the short form draws the two numbers with a slash between them ("3 / 10"), and a debug build reports it. |

### Events

| Event | Description |
| --- | --- |
| `change` | The user asked for another page, by a page or by first, previous, next or last; carries the page asked for. It is emitted before the page changes and before a link opens its address; a product that cancels it keeps the page as it was and opens nothing — its own router has taken the navigation (PGN-7). |

### States

`enabled`, `disabled`, `hovered`, `focused`, `pressed`, `selected`

### Accessibility

- Role: `navigation`
- Labeling: The landmark is named by label, which is required: a page has other navigation, and the name tells this one apart. Each page is named by pageLabel with its number ("Page 3"), which holds the number a person sees; the current page is exposed as the current one (aria-current="page"), so the name says nothing of it. The controls are icon-only and named by previousLabel, nextLabel, firstLabel and lastLabel. The arrows and the ellipsis are hidden from assistive technology.
- Minimum target size: yes

| Keys | Action |
| --- | --- |
| Tab / Shift+Tab | Moves focus through the enabled items in reading order: each page and each enabled control is a tab stop, as the links of a navigation region are. The current page is a stop too; a disabled control is not. |
| Enter | Activates the focused item: goes to its page. |
| Space | Activates the focused item where the items are buttons. Where they are links it scrolls the page, as on any link. |

- A pagination pages one list by number. The page before and after in a sequence of titled pages — the chapters of a guide, the articles of a series — is Previous and next links, which say by title where they lead.
- Links or buttons: a page with an address of its own (a result page a person can bookmark, share or open in a tab) is a link; a list whose page changes in place (the rows of a table, a dialog's list) is a button. href decides.
- The current page is marked by its fill and by aria-current, never by color alone: its fill differs from the rest in lightness, and forced colors draw it in the highlight colors (PGN-21).
- Disabled controls keep their places, so a person who pages through a list finds next where it was (PGN-5). They are out of the focus order: there is nothing to go to.
- The ellipsis is not a control. A person reaches a page it stands for by moving towards it, or by the product's own way to jump to a page; a pagination does not draw a field to type a page into.
- How many rows a page holds, and the range of rows shown ("1–10 of 248"), are the list's and not the pagination's: a table says them in its status line, where the pagination stands beside a Select for the rows per page.
- The short form is text: when the page changes, the product says what changed where the content changes (a heading, a status). The pagination announces nothing.
- Contrast in the default system: the numbers and arrows are on-surface, held to 4.5:1 (7:1 in the high-contrast schemes) by the token invariants, and the current page's number on-secondary-container on its fill. The focus ring is held to 3:1 against every surface.
- How a state looks is a value decision of the active design system (a state-layer mix in Tanrei, a dim or no hover at all elsewhere). The pagination reads the state's tokens and never computes the effect itself.
- A pagination belongs after the list it pages, and where the list is long, before it too; both name the same landmark by different labels.

### Behaviour

Requirements in EARS form, each with its stable id.

- **PGN-1** THE pagination SHALL be one navigation landmark named by label that holds its items as one list in reading order — first, previous, the pages and ellipses, next, last; in the compact form first, previous, the count sentence, next, last — and nothing else; WHILE label is empty THE pagination SHALL still render, and in debug builds report that the landmark has no accessible name.
- **PGN-2** THE numbered form SHALL show the pages 1 to boundaries, the pages count − boundaries + 1 to count, and the current page with siblings pages on each side of it, and SHALL draw an ellipsis in place of the pages left out between two of these runs; WHERE the ellipsis would stand for one page only THE numbered form SHALL draw that page instead. WHILE the current page is near an end THE numbered form SHALL show more pages on the other side of it, so that the row holds the same number of places — 2 × boundaries + 2 × siblings + 3 — on every page whenever count is at least that many, and the row keeps its width from page to page.
- **PGN-3** THE pagination SHALL read count as a whole number, and WHILE it is below 1 or cannot be read SHALL draw nothing, take no room and expose no landmark; it SHALL read page as a whole number held between 1 and count, and siblings and boundaries as whole numbers of 0 or more (boundaries 0 shows no end pages, so that an ellipsis stands at an end), and in debug builds report each value it had to change.
- **PGN-4** THE pagination SHALL draw the current page from the current tokens (comp.pagination.current.container.color, comp.pagination.current.label.color and so on) and every other page and every control from the item tokens, and SHALL expose the current page as the current one (on the web aria-current="page") while keeping it the same kind of element as the other pages: a link to its own address while href is given, a button otherwise. WHEN the current page is activated THE pagination SHALL emit no change; a current page that is a link still opens its own address, as any link does.
- **PGN-5** WHILE the current page is 1 THE pagination SHALL draw first and previous disabled, and WHILE it is count, next and last disabled: drawn from the disabled state's tokens, exposed as disabled, out of the focus order and not activatable, and in their places, so that the row keeps its width; a disabled control of a pagination with href SHALL have no address.
- **PGN-6** WHILE href is not empty THE pagination SHALL draw every page and every enabled control as the platform's own link to href with {page} filled with the page it leads to, written as a whole number in Western digits whatever the language, so that whatever the platform gives a link — on the web its context menu, opening in a new tab, copying its address, the address shown before it is followed — is the platform's; it SHALL expose the link role and WHERE the platform's links can say how a destination relates to the page (the web's rel) SHALL say prev for previous and next for next. IF href does not hold the place {page}, or names a script to run (the web's javascript: scheme), THE pagination SHALL draw buttons as if href were empty and in debug builds report it.
- **PGN-7** WHEN the user activates a page other than the current one, or an enabled control, by pointer, touch, Enter, Space on a button or assistive technology THE pagination SHALL emit change exactly once with the page it leads to — first 1, previous page − 1, next page + 1, last count — and then, unless the product cancelled it, SHALL make that page the current one and, while href is given, open the link's address where the person is; WHEN the product cancels change THE pagination SHALL keep the page it had and open nothing. A link SHALL NOT be activated by Space, which scrolls the page as it does on any link.
- **PGN-8** THE pagination SHALL draw previous, next, first and last as icons only — chevron_left, chevron_right, first_page and last_page of the system's icon set, through the platform's icon helper, in a box of comp.pagination.icon.size, in the icon color of their state, with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max — and SHALL name them by previousLabel, nextLabel, firstLabel and lastLabel, taking each from the product's words WHILE it is empty; WHILE a control's name is empty in both THE pagination SHALL still draw it and in debug builds report that it has no accessible name. It SHALL take no glyph from the product and SHALL draw no path of its own.
- **PGN-9** THE pagination SHALL draw a page's number in comp.pagination.label.typescale, in the digits the platform's number formatting gives for the language where it is used, without grouping separators (1205, not 1,205), and in figures of one width, and SHALL name the page by pageLabel with {page} filled by the number as it is drawn, taking pageLabel from the product's words WHILE it is empty and naming the page by its number alone WHILE neither gives one; the number drawn SHALL stay part of the name, so that a person who says what they see can activate the page.
- **PGN-10** THE pagination SHALL draw an ellipsis as the character … in comp.pagination.label.typescale and comp.pagination.ellipsis.color, centred in a place as wide as an item is high (comp.pagination.container.height.medium for medium, and so on), hidden from assistive technology, out of the focus order and with no state: the pages left out are said by the numbers on either side of it.
- **PGN-11** WHILE variant is compact, or variant is numbered and the width the layout gives the pagination is less than its numbered row needs, THE pagination SHALL draw the compact form: first and previous, then countText with {page} and {count} filled, comp.pagination.count.padding-inline on each side, in comp.pagination.count.typescale and comp.pagination.count.color, then next and last; WHILE countText is empty in both the prop and the product's words THE compact form SHALL draw the two numbers with a slash between them ("3 / 10") and in debug builds report it. It SHALL decide this by the width it is given, not by the window's, and the width it asks of a layout that sizes it by its content SHALL be the width of its numbered row, so that it draws the numbered form again where the room comes back. The sentence is text, not a control and not a live region: the product says what changed where the content changes.
- **PGN-12** THE pagination SHALL lay its items out in one row at the start edge of its box, comp.pagination.gap apart, each item the container height of its size high (comp.pagination.container.height.medium for medium, and so on) and at least as wide, a page's number centred in it with comp.pagination.container.padding-inline on each side where the number is wider than the square, and each control's arrow centred in its square; it SHALL NOT wrap the row.
- **PGN-13** WHILE an item is hovered, keyboard-focused, pressed or disabled THE pagination SHALL render its container, label, arrow and opacity from the component tokens of the highest-precedence active state of its part (item or current), with precedence disabled over pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
- **PGN-14** WHEN an item receives keyboard focus THE pagination SHALL show the focus ring around that item without animation — the system's focus indicator, sys.focus.offset from the container, sys.focus.outer-width wide in the focus-ring color, with the inner stroke of sys.focus.inner-width where the system has one; focus gained by pointer or touch SHALL NOT show it.
- **PGN-15** WHEN an enabled item is pressed by pointer, touch, Enter or, on a button, Space THE pagination SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner; it SHALL NOT hold the change or the navigation back for press-hold.
- **PGN-16** WHILE pressed THE pagination SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole item and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.pagination.motion.feedback-duration with comp.pagination.motion.state-easing, fades over comp.pagination.motion.state-duration with comp.pagination.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
- **PGN-17** THE pagination SHALL ease its item corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
- **PGN-18** THE pagination SHALL change an item between its states over comp.pagination.motion.state-duration with comp.pagination.motion.state-easing, and at once where motion is reduced; WHEN the current page changes THE pagination SHALL change the item that was current and the item that becomes current between their states as it changes any item's, and SHALL draw at once the items whose page numbers or places change.
- **PGN-19** THE pagination SHALL make each enabled item one stop of the focus order, in the order of PGN-1, as the links and buttons of a navigation region are, and SHALL take no arrow key: Tab and Shift+Tab move between items. WHEN the current page changes by an item the person activated THE pagination SHALL keep focus on an item: on the page now current where the person activated a page, and on the control they activated where it is still enabled, otherwise on the page now current — and in the compact form, which draws no pages, on the nearest enabled control (previous after next or last, next after previous or first).
- **PGN-20** WHERE the visual size of an item is below the minimum target THE pagination SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size and without overlapping the hit area of its neighbour beyond the gap between them; a platform that cannot tell the input type SHALL use sys.target.touch.
- **PGN-21** WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE pagination SHALL draw the numbers, the arrows and the count sentence in the platform's text or link color, the current page in the platform's highlight colors, a disabled control in the platform's disabled text color, and the focus ring in the platform's highlight color.
- **PGN-22** WHILE the text size is enlarged THE pagination SHALL grow each item with its number, never below the container height of its size (comp.pagination.container.height.medium for medium, and so on), keeping comp.pagination.gap and the arrows at comp.pagination.icon.size, and SHALL draw the compact form where the grown row no longer fits (PGN-11).
- **PGN-23** THE pagination SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHERE that direction is right-to-left THE pagination SHALL lay its row from the right — first at the right edge, last at the left — keeping the reading and focus order of PGN-1, and SHALL draw the arrows mirrored where the system's icon set marks them as mirrored; THE pagination SHALL NOT mirror a glyph itself. WHEN the direction changes while the pagination is shown THE pagination SHALL draw itself for the new direction at once, keeping its focus.
- **PGN-24** THE pagination SHALL lay out the count sentence as text of its own direction, isolated from the text around it, and each number as a number that keeps its own order in a right-to-left layout, so that "3 / 10" reads 3 then 10 in either direction.
- **PGN-25** WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE pagination SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its navigation landmark (PGN-1) — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label is not empty it is the landmark's name, over a name given so; WHILE label is empty, a name given so is the landmark's name and SHALL NOT be reported as having none in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE pagination SHALL take it off that element.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.pagination.…` → `--tanrei-comp-pagination-…`).

#### `tanrei.comp.pagination`

| Token | Type | Value |
| --- | --- | --- |
| `comp.pagination.gap` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.pagination.container.height.small` | `dimension` | `32px` |
| `comp.pagination.container.height.medium` | `dimension` | `40px` |
| `comp.pagination.container.padding-inline` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.pagination.container.shape` | `dimension` | `{tanrei.sys.shape.corner.full}` |
| `comp.pagination.label.typescale` | `typography` | `{tanrei.sys.typescale.label}` |
| `comp.pagination.icon.size` | `dimension` | `{tanrei.sys.icon.small}` |
| `comp.pagination.ellipsis.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.pagination.count.typescale` | `typography` | `{tanrei.sys.typescale.body}` |
| `comp.pagination.count.color` | `color` | `{tanrei.sys.color.on-surface}` |
| `comp.pagination.count.padding-inline` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.pagination.item.container.color` | `color` | `{"colorSpace":"srgb","components":[0,0,0],"alpha":0,"hex":"#000000"}` |
| `comp.pagination.item.label.color` | `color` | `{tanrei.sys.color.on-surface}` |
| `comp.pagination.item.icon.color` | `color` | `{tanrei.sys.color.on-surface}` |
| `comp.pagination.item.state-layer.color` | `color` | `{tanrei.comp.pagination.item.label.color}` |
| `comp.pagination.current.container.color` | `color` | `{tanrei.sys.color.secondary-container}` |
| `comp.pagination.current.label.color` | `color` | `{tanrei.sys.color.on-secondary-container}` |
| `comp.pagination.current.icon.color` | `color` | `{tanrei.sys.color.on-secondary-container}` |
| `comp.pagination.current.state-layer.color` | `color` | `{tanrei.comp.pagination.current.label.color}` |
| `comp.pagination.motion.state-duration` | `duration` | `{tanrei.sys.motion.role.state.compact}` |
| `comp.pagination.motion.state-easing` | `cubicBezier` | `{tanrei.sys.motion.easing.state}` |
| `comp.pagination.motion.feedback-duration` | `duration` | `{tanrei.sys.motion.role.feedback}` |

Per-state tokens, valued by the design system's pattern rules (not written by hand):

- `comp.pagination.<variant>.<state>.<property>` for the variants `item`, `current`, the states `hovered`, `focused`, `pressed`, `disabled` and the properties `container.color`, `label.color`, `icon.color`, `state-layer.color`.
- `comp.pagination.<state>.<property>` for the states `hovered`, `focused`, `pressed`, `disabled` and the properties `opacity`, `container.shape`.

## ガイドライン

### 推奨

- めくる対象のリストの後に置きます。リストが長いときは、リストの前にも置きます。
- ページごとにアドレスがあるならリンク（`href`）を、ページがその場で変わるならボタンを使います。
- [テーブル](https://tanrei.chnotchy.com/ja/components/table/)の下では、ステータス行にサイズ `small` の短い形を置きます。1 ページの行数を選べるようにするなら、その横に行数のための[セレクト](https://tanrei.chnotchy.com/ja/components/select/)を置きます。表示中の行の範囲（「248 件中 1〜10 件」）はテーブルのステータスの文です。
- ページが変わったら、内容が変わる場所で、何が変わったかを伝えます（見出しや、テーブルのステータスの文など）。ページネーションは何も読み上げさせません。

### 非推奨

- タイトルのあるページが続く並びで、前後のページへ進むために使わない。それは[前後のリンク](https://tanrei.chnotchy.com/ja/components/previous-next-links/)です。
- 1 ページしかないリストに表示しない。
- 最初のページと最後のページで、前と次を隠さない。無効になり、場所はそのまま残ります。

## アクセシビリティ

### コンポーネントが担うこと

- 1 つのリストを囲む 1 つのナビゲーションランドマークです。各ページと有効な各コントロールはリンクかボタンで、フォーカス順の 1 つの停止位置です。
- 現在のページは `aria-current="page"` で公開され、色の違いだけでなく塗りつぶしで描かれます。
- 無効なコントロールはフォーカス順から外れます。矢印と省略記号は支援技術から隠されます。
- ページの名前には画面に見える番号が含まれるので、見えているものを声に出して操作する人もそのページを押せます。

### 利用者側で行うこと

- ランドマークに `label` で、プロダクトの言語の名前を付けます。ページにはほかのナビゲーションもあるので、名前で区別できるようにします。
- コントロールに名前を付けます（`previous-label`、`next-label`、`first-last` があるときは `first-label` と `last-label`）。ページには `page-label` で名前を付けます。Tanrei は言葉を同梱しません。
- リストを入れ替えたら、何が変わったかを伝えます。ページネーションはフォーカスを自分の項目の 1 つに保ちます。押されたコントロールか、そのコントロールが無効になったときは、新しく現在のページになった項目です。