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