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

<Overview group="buttons">

# IconButton [tag:component]

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

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

</Overview>

{/* @example-description: Базовая кнопка-иконка `IconButton` с подписью для скринридера через `label`. */}
<Playground>
  ```jsx
  <IconButton label="Удалить" onClick={() => {}}>
    <Icon16Delete />
  </IconButton>
  ```
</Playground>

## Контент

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

## Доступность (a11y) [#a11y]

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

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

> Если одновременно переданы свойства `href` и `disabled`, компонент отключает `href`,
> чтобы соответствовать требованиям доступности. По возможности избегайте такой комбинации.

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

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

- Передача текста в `children` вместе с иконкой, обернутого в компонент `VisuallyHidden`:

  ```jsx
  <IconButton>
    <VisuallyHidden>Поиск</VisuallyHidden>
    <Icon16Search />
  </IconButton>
  ```

- Использование атрибута `aria-label`:

  ```jsx
  <IconButton aria-label="Поиск">
    <Icon16Search />
  </IconButton>
  ```

- Передача `title`:

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

- Создание отдельного элемента с текстом и ссылка на него через `aria-labelledby`:

  ```jsx
  <span id="search-label">Поиск</span>
  <IconButton aria-labelledby="search-label">
  <Icon16Search />
  </IconButton>
  ```

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `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. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `label` | `string` | `-` | Текст кнопки-иконки. Делает ее доступной для ассистивных технологий. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |