---
title: "Pagination"
description: "Controlled navigation between numbered pages. It compresses the range with an ellipsis, announces the current page and disables the ends."
kind: component
id: C-028
registry: "pagination"
docs: "https://koten.codehive.com.co/components/pagination"
markdown: "https://koten.codehive.com.co/md/components/pagination.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/pagination.json"
language: en
---

# Pagination · ページ送り

> Component C-028 in the Koten UI catalog.

Controlled navigation between numbered pages. It compresses the range with an ellipsis, announces the current page and disables the ends.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/pagination.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/pagination.json
```

## Files

- `@/components/ui/pagination.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Wide range

With 12 pages the ends, the current page and its neighbours are shown; the rest collapses into an ellipsis.

```tsx
<Pagination
  page={page}
  pageCount={12}
  onPageChange={setPage}
  previousLabel="Previous"
  nextLabel="Next"
  navLabel="Order pages"
  pageLabel={(value) => `Page ${value}`}
/>
```

### Short range

With four pages there is no ellipsis and the previous button starts disabled.

```tsx
<Pagination
  page={page}
  pageCount={4}
  onPageChange={setPage}
  previousLabel="Previous"
  nextLabel="Next"
  navLabel="Invoice pages"
  pageLabel={(value) => `Page ${value}`}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `page` | `number` | `—` | Current page, 1-based. The component is controlled. |
| `pageCount` | `number` | `—` | Total number of pages; it must be at least 1. |
| `onPageChange` | `(page: number) => void` | `—` | The consumer updates page; there is no internal state. |
| `previousLabel` | `string` | `—` | Accessible name of the previous button. |
| `nextLabel` | `string` | `—` | Accessible name of the next button. |
| `navLabel` | `string` | `—` | Accessible name of the nav that wraps the pagination. |
| `pageLabel` | `(page: number) => string` | `String(page)` | Accessible name of each page number. |
| `className` | `string` | `—` | Applied to the nav; the buttons keep their density size. |

## Accessibility

- navLabel names the navigation and pageLabel names each page button.
- The current page uses aria-current="page", plus its own background and weight.
- Previous and next are disabled at the ends and their icons are decorative.
- Ellipses are aria-hidden; the buttons keep focus and tab order.

## Sources

- Catalog page: https://koten.codehive.com.co/components/pagination
- Markdown: https://koten.codehive.com.co/md/components/pagination.md
- Repository: https://github.com/codehive-colombia/koten