ReferenceComponentsNavigation
Pagination
Pagination component API, behavior, and executable example.
Loading executable example…
API and events
Provide terminal-native local navigation, command menus, hierarchical trails, and workflow progress.
export function Pagination({
page,
pageCount,
onPageChange,
disabled = false,
...props
}: PaginationProps): ReactNode;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 |
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
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
import { Pagination } from "@/components/tuil/navigation/navigation";