Pagination

Pagination — составной компонент для постраничной навигации.

Пропсы корня

Проп	Тип	По умолчанию
`ref`	`Ref<HTMLUListElement>`	—
Ref, передаваемый на нижележащий элемент списка.
`size`	`PaginationSize`	`'md'`
Визуальный размер элементов пагинации, унаследованный от IconButtonProps. Управляет отступами, размером шрифта или интервалами по шкале дизайн-системы.
`variant`	`PaginationVariant`	`'primary'`
Визуальный вариант компонента. Наследует доступные значения из `IconButtonProps['variant']`, например 'primary' или 'secondary'. Управляет визуальным стилем (цветом, фоном, рамкой) по дизайн-системе.

Также принимает все атрибуты <ul>.

Дочерние части

PaginationItem: элемент с номером страницы.
PaginationTriggerIconButton: кнопки «назад» / «вперёд» или перехода.
PaginationEllipsis: визуальный элемент пропуска.
PaginationListItem: обёртка элемента списка.
PaginationText: компактный текстовый статус.

`PaginationItem`

Проп	Тип	По умолчанию
`current`	`boolean`	—
Помечает этот элемент как текущую активную страницу. Применяет визуальный акцент.
`asChild`	`boolean`	—
Если true, рендерит кнопку как дочерний компонент через `Slot` (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег.
`size`	`ButtonSize`	—
Определяет размер кнопки. Влияет на отступы, размер шрифта и общие габариты.
`fullWidth`	`boolean`	—
Если true, кнопка растягивается на всю ширину контейнера.
`variant`	`ButtonBaseVariant`	—
Определяет визуальный стиль кнопки: цветовую схему и акцент.
`appearance`	`ButtonBaseAppearance`	—
Настраивает структурный внешний вид кнопки (фон, рамка и т. д.).
`disabled`	`boolean`	—
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с `asChild`: отключённым состоянием владеет дочерний элемент, например через `aria-disabled` или ссылку без `href`.
`className`	`string`	—
Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей.
`children`	`ReactNode`	—
Содержимое кнопки — текст, иконка или любой React-узел.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нативный элемент `<button>`. Даёт прямой доступ к DOM для управления фокусом или измерений.

Также принимает все атрибуты <button>.

`PaginationTriggerIconButton`

Проп	Тип	По умолчанию
`size`	`IconButtonSize`	—
Размер контейнера кнопки. Управляет отступами и общей кликабельной областью.
`asChild`	`boolean`	—
Если true, рендерит кнопку как дочерний компонент через `Slot` (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег.
`variant`	`ButtonBaseVariant`	—
Определяет визуальный стиль кнопки: цветовую схему и акцент.
`appearance`	`ButtonBaseAppearance`	—
Настраивает структурный внешний вид кнопки (фон, рамка и т. д.).
`disabled`	`boolean`	—
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с `asChild`: отключённым состоянием владеет дочерний элемент, например через `aria-disabled` или ссылку без `href`.
`className`	`string`	—
Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей.
`children`	`ReactNode`	—
Содержимое кнопки — текст, иконка или любой React-узел.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нативный элемент `<button>`. Даёт прямой доступ к DOM для управления фокусом или измерений.

Также принимает все атрибуты <button>.

`PaginationEllipsis`

Проп	Тип	По умолчанию
`asChild`	`boolean`	—
Если true, рендерит кнопку как дочерний компонент через `Slot` (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег.
`size`	`ButtonSize`	—
Определяет размер кнопки. Влияет на отступы, размер шрифта и общие габариты.
`fullWidth`	`boolean`	—
Если true, кнопка растягивается на всю ширину контейнера.
`variant`	`ButtonBaseVariant`	—
Определяет визуальный стиль кнопки: цветовую схему и акцент.
`appearance`	`ButtonBaseAppearance`	—
Настраивает структурный внешний вид кнопки (фон, рамка и т. д.).
`disabled`	`boolean`	—
Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с `asChild`: отключённым состоянием владеет дочерний элемент, например через `aria-disabled` или ссылку без `href`.
`className`	`string`	—
Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей.
`children`	`ReactNode`	—
Содержимое кнопки — текст, иконка или любой React-узел.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нативный элемент `<button>`. Даёт прямой доступ к DOM для управления фокусом или измерений.

Также принимает все атрибуты <button>.

`PaginationListItem`

Также принимает все атрибуты <li>.

`PaginationText`

Проп	Тип	По умолчанию
`variant`	`PaginationVariant`	—
Вариант визуального стиля текста.
`size`	`TextSize`	—
Визуальный размер текста, обычно соответствует типографической шкале дизайн-системы.
`asChild`	`boolean`	—
Если true, рендерит текст как дочерний компонент через `Slot`. Полезно для совместимости с нативными элементами или другими компонентами.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	`500`
Насыщенность шрифта текста. Распространённые значения: 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный
`ref`	`Ref<HTMLSpanElement>`	—
Ref на нижележащий `<span>` или элемент в слоте. Полезен для измерений, фокуса или работы с DOM.

Также принимает все атрибуты <span>.

Типы

PaginationProps
PaginationItemProps
PaginationTriggerIconButtonProps
PaginationEllipsisProps
PaginationListItemProps
PaginationTextProps
PaginationSize
PaginationVariant

Модель состояния

Корень предоставляет только общий контекст стилей.
Текущей страницей, отключением на границах и поведением маршрутизации владеет родительская функция.
PaginationItem current выставляет aria-current='page'.