ButtonIcon
ButtonIcon — квадратная кнопка с иконкой вместо текста.
Иконку потребитель ставит сам — она идёт в children; кнопка держит квадратную пропорцию и центрирует содержимое. Проп label задаёт тултип при наведении и aria-label — без него у кнопки нет доступного имени, поэтому указывай его всегда.
Стандартные атрибуты button (onClick, disabled и т.д.) пробрасываются на DOM-элемент; задизейбленная кнопка приглушается автоматически. Кнопка с текстом — Button.
Используется в: Calendar, Field, FloatingPanel, QuickSearch, Toast
Анатомия
Примеры
Вариант
Смысловой вариант — задаёт цвет: primary — главное действие, secondary — второстепенное, success / warning / danger — семантические действия, default — нейтральная.
Внешний вид
Внешний вид: solid — сплошная заливка, outline — обводка без заливки, dashed — та же обводка пунктиром, ghost — только иконка, фон появляется при наведении.
Размер
Размер задаёт сторону квадрата и шрифт кнопки; иконка масштабируется вместе с ним. От компактного xs до крупного xl.
Скругление
Скругление углов — от прямых none до круглой circle. Без пропа скругление задаёт size.
Нажатое состояние
Постоянно «нажатое» состояние — для выбранного элемента, например активного инструмента в тулбаре.
Тултип
label — текст тултипа при наведении, он же aria-label кнопки. tooltipPlacement задаёт сторону появления (по умолчанию top) — наведи курсор, чтобы увидеть.
color
API
| Prop | Type | Default |
|---|---|---|
children*Иконка кнопки | ReactNode | - |
radiusСкругление углов: circle — круглая кнопка. По умолчанию зависит от size | Radius | - |
pressedПостоянно «нажатое» состояние — для обозначения выбранного элемента (например, активного инструмента в тулбаре) | boolean | false |
labelТекст тултипа (и aria-label) кнопки | string | - |
tooltipPlacementСторона появления тултипа | TooltipProps["placement"] | - |
variantСмысловой вариант — задаёт цвет | Variant | "primary" |
appearanceВнешний вид: сплошная заливка, обводка (сплошная или пунктирная) или приглушённая подложка | Appearance | "solid" |
sizeРазмер компонента | Size | - |
colorКастомный цвет — для случаев вне стандартного набора вариантов. Принимает любое CSS-значение, имеет приоритет над цветом из variant | string | - |
Наследуется от Pick<VisualProps, K>, ButtonHTMLAttributes<HTMLButtonElement>