# Pagination

Source: /tuil/docs/reference/components/navigation/pagination
Locale: en

Pagination component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Tabs" />

## API and events [#api-and-events]

Provide terminal-native local navigation, command menus, hierarchical trails, and workflow progress.

```tsx
export function Pagination({
  page,
  pageCount,
  onPageChange,
  disabled = false,
  ...props
}: PaginationProps): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member         | Type                                                                             | Required | Description                                                                                                             | Related types                                                     |
| -------------- | -------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `page`         | `number`                                                                         | Yes      | The `page` member uses the `number` contract.                                                                           | —                                                                 |
| `pageCount`    | `number`                                                                         | Yes      | The `pageCount` member uses the `number` contract.                                                                      | —                                                                 |
| `onPageChange` | `((page: number) => void \| Promise<void>) \| undefined`                         | No       | The `onPageChange` member uses the `((page: number) => void \| Promise<void>) \| undefined` contract.                   | —                                                                 |
| `variant`      | `string \| undefined`                                                            | No       | The `variant` member uses the `string \| undefined` contract.                                                           | —                                                                 |
| `size`         | `"sm" \| "md" \| "lg" \| undefined`                                              | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                | —                                                                 |
| `unstyled`     | `boolean \| undefined`                                                           | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                         | —                                                                 |
| `className`    | `string \| undefined`                                                            | No       | The `className` member uses the `string \| undefined` contract.                                                         | —                                                                 |
| `layout`       | `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined` | No       | The `layout` member uses the `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined` contract. | —                                                                 |
| `id`           | `string \| undefined`                                                            | No       | The `id` member uses the `string \| undefined` contract.                                                                | —                                                                 |
| `testId`       | `string \| undefined`                                                            | No       | The `testId` member uses the `string \| undefined` contract.                                                            | —                                                                 |
| `role`         | `SemanticRole \| undefined`                                                      | No       | The `role` member uses the `SemanticRole \| undefined` contract.                                                        | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role) |
| `label`        | `string \| undefined`                                                            | No       | The `label` member uses the `string \| undefined` contract.                                                             | —                                                                 |
| `description`  | `string \| undefined`                                                            | No       | The `description` member uses the `string \| undefined` contract.                                                       | —                                                                 |
| `disabled`     | `boolean \| undefined`                                                           | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                         | —                                                                 |
| `readOnly`     | `boolean \| undefined`                                                           | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                         | —                                                                 |
| `selected`     | `boolean \| undefined`                                                           | No       | The `selected` member uses the `boolean \| undefined` contract.                                                         | —                                                                 |
| `checked`      | `boolean \| undefined`                                                           | No       | The `checked` member uses the `boolean \| undefined` contract.                                                          | —                                                                 |
| `expanded`     | `boolean \| undefined`                                                           | No       | The `expanded` member uses the `boolean \| undefined` contract.                                                         | —                                                                 |
| `valueText`    | `string \| undefined`                                                            | No       | The `valueText` member uses the `string \| undefined` contract.                                                         | —                                                                 |

Selections and value changes are reported through component callbacks.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Arrow keys move within the active navigation model; Enter selects or activates.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { Pagination } from "@/components/tuil/navigation/navigation";
```