# ButtonBase: API

## Пропсы корня

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

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

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

У `ButtonBase` нет экспортируемых структурных дочерних частей.

Когда включён `asChild`, отрендеренной семантической целью становится один дочерний элемент в слоте.

## Типы

| Тип | Определение | Примечания |
| --- | --- | --- |
| `ButtonBaseProps` | тип пропсов корня | Расширяет нативные атрибуты кнопки. |
| `ButtonBaseVariant` | `'primary' \| 'secondary' \| string` | Цветовое семейство. |
| `ButtonBaseAppearance` | `'fill' \| 'outline' \| 'ghost' \| 'transparent' \| string` | Стиль поверхности. |

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

- У `ButtonBase` нет внутреннего состояния.
- Визуальное поведение определяется `variant`, `appearance` и нативными состояниями: `:hover`, `:active`, `:focus-visible` и `disabled`.
- `asChild` меняет рендерируемый элемент, но не контракт стилей.

## Заметки по интеграции

- Задавайте `type='button'` для действий внутри форм, которые не отправляют форму.
- Добавляйте явное доступное имя для содержимого только из иконки.
- Используйте `Button` или `IconButton`, когда продуктовому коду нужны более высокоуровневые API раскладки и размеров.