Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
size | IconButtonSize | 'md' |
| Размер контейнера кнопки. Управляет отступами и общей кликабельной областью. | ||
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>.
Дочерние части
IconButton не предоставляет публичных дочерних частей.
Типы
IconButtonPropsIconButtonSize
Модель состояния
- С точки зрения API компонента
IconButtonв основном не имеет состояния. - Отключение и состояние иконки обычно задаёт потребитель.
disabledне применяется приasChild, потому что семантикой владеет дочерний элемент. Отключённая ссылка — это<a>безhref; добавьтеaria-disabled="true", чтобы получить стили отключённого состояния и его объявление.- За доступное имя отвечает потребитель, потому что видимого текста нет.