ButtonIcon

ButtonIcon — квадратная кнопка с иконкой вместо текста.

Иконку потребитель ставит сам — она идёт в children; кнопка держит квадратную пропорцию и центрирует содержимое. Проп label задаёт тултип при наведении и aria-label — без него у кнопки нет доступного имени, поэтому указывай его всегда.

Стандартные атрибуты button (onClick, disabled и т.д.) пробрасываются на DOM-элемент; задизейбленная кнопка приглушается автоматически. Кнопка с текстом — Button.

Анатомия

ButtonIcon

Примеры

Вариант

Смысловой вариант — задаёт цвет: primary — главное действие, secondary — второстепенное, success / warning / danger — семантические действия, default — нейтральная.

Внешний вид

Внешний вид: solid — сплошная заливка, outline — обводка без заливки, dashed — та же обводка пунктиром, ghost — только иконка, фон появляется при наведении.

Размер

Размер задаёт сторону квадрата и шрифт кнопки; иконка масштабируется вместе с ним. От компактного xs до крупного xl.

Скругление

Скругление углов — от прямых none до круглой circle. Без пропа скругление задаёт size.

Нажатое состояние

Постоянно «нажатое» состояние — для выбранного элемента, например активного инструмента в тулбаре.

Тултип

label — текст тултипа при наведении, он же aria-label кнопки. tooltipPlacement задаёт сторону появления (по умолчанию top) — наведи курсор, чтобы увидеть.

color

API

PropTypeDefault
children*

Иконка кнопки

ReactNode-
radius

Скругление углов: circle — круглая кнопка. По умолчанию зависит от size

Radius-
pressed

Постоянно «нажатое» состояние — для обозначения выбранного элемента (например, активного инструмента в тулбаре)

booleanfalse
label

Текст тултипа (и aria-label) кнопки

string-
tooltipPlacement

Сторона появления тултипа

TooltipProps["placement"]-
variant

Смысловой вариант — задаёт цвет

Variant"primary"
appearance

Внешний вид: сплошная заливка, обводка (сплошная или пунктирная) или приглушённая подложка

Appearance"solid"
size

Размер компонента

Size-
color

Кастомный цвет — для случаев вне стандартного набора вариантов. Принимает любое CSS-значение, имеет приоритет над цветом из variant

string-

Наследуется от Pick<VisualProps, K>, ButtonHTMLAttributes<HTMLButtonElement>