IconButton

Компонент представляет собой обертку-кнопку для интерактивной иконки. Поддержка видимого текстового сопровождения не предусмотрена.

Компонент наследует свойства компонента Tappable, что обеспечивает базовую функциональность для интерактивных элементов, таких как обработка событий нажатия (onClick), отключение (disabled) и поддержка ссылок (href). Дополнительно IconButton имеет собственное свойство label, предназначенное для обеспечения цифровой доступности.

Загружается...

Контент

Основным содержимым IconButton является иконка, передаваемая через children. Для соответствия размерам кнопки рекомендуется использовать иконки следующих размеров: 16px, 24px, 28px или 36px.

Компонент IconButton автоматически выбирает правильный HTML-тег: по умолчанию это button, а если передано свойство href, то a. Это обеспечивает базовую поддержку доступности.

Компонент поддерживает все стандартные aria-атрибуты, что позволяет переопределить поведение по умолчанию, если это необходимо.

Также для обеспечения цифровой доступности IconButton необходимо предоставить текст, который сможет прочитать скринридер. Рекомендуемый способ — использование свойства label.

Альтернативные способы:

Передача текста в children вместе с иконкой, обернутого в компонент VisuallyHidden:
```
<IconButton>
  <VisuallyHidden>Поиск</VisuallyHidden>
  <Icon16Search />
</IconButton>
```
Использование атрибута aria-label:
```
<IconButton aria-label="Поиск">
  <Icon16Search />
</IconButton>
```

Передача title:

<IconButton title="Поиск">
  <Icon16Search />
</IconButton>

Создание отдельного элемента с текстом и ссылка на него через aria-labelledby:
```
<span id="search-label">Поиск</span>
<IconButton aria-labelledby="search-label">
<Icon16Search />
</IconButton>
```

Свойства и методы

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`label`	`string` Текст кнопки-иконки. Делает ее доступной для ассистивных технологий. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

CellButton

SimpleCell

IconButton

Контент

Доступность (a11y)

Альтернативные способы:

Свойства и методы