IconButton

IconButton — вариант действия только с иконкой, построенный на той же основе, что и Button.

Обзор

Стили IconButton разделены между ButtonBase, который отвечает за семантические варианты и оформление, и локальным слоем размеров IconButton для квадратных габаритов и размера иконки.

Публичные CSS-переменные

Переменная	Значение	Влияет на
Размер квадратного контрола.`IconButton`		В этом состоянии изменений не видно
Коэффициент радиуса скругления.`IconButton`		В этом состоянии изменений не видно
Рекомендуемый размер иконки, производный от размера кнопки.вложенная иконка		В этом состоянии изменений не видно
Текущий цвет содержимого.`ButtonBase`		В этом состоянии изменений не видно
Текущий цвет фона.`ButtonBase`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

IconButton: локальные квадратные размеры и радиус.
ButtonBase: общие стили вариантов, оформления, отключённого состояния, наведения, нажатия и фокуса.

Взаимодействие состояний и вариантов

size напрямую соответствует размеру квадратной кнопки.
variant и appearance обрабатывает ButtonBase.
Читаемость иконки зависит и от размера контрола, и от выбора глифа.

Примеры

--icon-button-size и --icon-button-br-ratio превращают квадрат в большую круглую кнопку звонка; вложенная иконка по-прежнему занимает треть размера. Кнопка завершения звонка переопределяет переменные фона, включая наведение и нажатие.

LTRRTL

css-variable-overrides.tsx · 31 строка

import type { CSSProperties } from 'react';
import { Icon, IconButton } from '@vega-ui/react';
import { MicIcon, PhoneOffIcon, VideoIcon } from '@vega-ui/icons';

const round = {
  '--icon-button-size': '48px',
  '--icon-button-br-ratio': 0.5,
} as CSSProperties;

const hangUp = {
  ...round,
  '--button-background-color': 'var(--color-red-accent-500)',

Не переопределяйте

Не убирайте видимость фокуса без замены.
Не навязывайте размеры иконок, которые выглядят несбалансированно в выбранном размере кнопки.
Не используйте стили «только иконка» как замену отсутствующей доступной подписи.