IconButton для кнопок с иконками

IconButton — это специализированный компонент для создания кнопок, содержащих только иконку без текста. Он широко используется в интерфейсах, где важна компактность элементов управления и визуальная лаконичность, например в тулбарах, карточках, панелях фильтров и модальных окнах. Компонент обеспечивает доступность, корректное взаимодействие с клавиатурой и поддерживает различные состояния, такие как активное, неактивное и наведенное.

Основная структура IconButton

В Svelte компонент импортируется из библиотеки carbon-components-svelte:

<script>
  import { IconButton } from 'carbon-components-svelte';
  import { Add24 } from 'carbon-icons-svelte';
</script>

<IconButton
  icon={Add24}
  label="Добавить элемент"
  on:click={() => console.log('Кнопка нажата')}
/>
  • icon — свойство, которое принимает компонент иконки. В Carbon Icons Svelte иконки поставляются как отдельные компоненты с указанием размера (например, Add16, Add24).
  • label — текстовое описание кнопки для скринридеров. Обязательное для обеспечения доступности.
  • on:click — обработчик событий клика, аналогичный стандартному onClick в HTML/JS.

Размеры и состояния

IconButton поддерживает несколько размеров, соответствующих рекомендациям Carbon Design System:

<IconButton icon={Add24} size="default" label="Добавить"/>
<IconButton icon={Add16} size="small" label="Удалить"/>
  • small — компактная кнопка для плотных интерфейсов.
  • default — стандартный размер, чаще всего используемый.

Состояния кнопки управляются через свойства:

  • disabled — делает кнопку неактивной, предотвращая взаимодействие:
<IconButton icon={Add24} label="Добавить" disabled={true}/>
  • active — отображает кнопку в активном состоянии, полезно для переключателей и элементов фильтров:
<IconButton icon={Add24} label="Выбран" active={true}/>
  • kind — визуальный стиль кнопки:
<IconButton icon={Add24} label="Добавить" kind="primary"/>
<IconButton icon={Add24} label="Удалить" kind="secondary"/>

Возможные значения: primary, secondary, tertiary, ghost, danger.

Использование с кастомными иконками

Помимо стандартных иконок Carbon, можно использовать собственные SVG-компоненты. Главное — передать компонент через свойство icon и указать label:

<script>
  import { IconButton } from 'carbon-components-svelte';
  import CustomIcon from './CustomIcon.svelte';
</script>

<IconButton icon={CustomIcon} label="Пользовательская кнопка"/>

Управление доступностью

IconButton обеспечивает корректное использование для пользователей с ограничениями зрения:

  • aria-label автоматически устанавливается на основе свойства label.
  • Если требуется, можно добавить title для подсказки при наведении мыши:
<IconButton icon={Add24} label="Добавить элемент" title="Добавить новый элемент"/>
  • Кнопки полностью управляются с клавиатуры — стандартное поведение Enter и Space обрабатывается компонентом.

Обработка событий

IconButton поддерживает стандартные события Svelte:

  • click — основной обработчик нажатия.
  • mouseover / mouseout — для кастомного hover-эффекта.
  • focus / blur — управление фокусом и визуальной подсветкой.

Пример с кастомной логикой:

<IconButton
  icon={Add24}
  label="Добавить"
  on:click={() => console.log('Добавление элемента')}
  on:focus={() => console.log('Фокус на кнопке')}
/>

Стилизация и кастомизация

Для расширенной стилизации можно использовать CSS-переменные Carbon или классы:

:global(.my-icon-button) {
  background-color: #0f62fe;
  border-radius: 50%;
}

:global(.my-icon-button:hover) {
  background-color: #0353e9;
}

Применение к компоненту:

<IconButton
  icon={Add24}
  label="Добавить"
  class="my-icon-button"
/>
  • :global нужен для обхода изоляции стилей в Svelte.
  • Использование CSS-переменных Carbon позволяет изменять цвета, размеры и тени без модификации кода компонента.

Комбинирование с другими компонентами

IconButton часто используется в комбинации с Tooltip, OverflowMenu и Modal:

<script>
  import { IconButton, Tooltip } from 'carbon-components-svelte';
  import { Add24 } from 'carbon-icons-svelte';
</script>

<Tooltip label="Добавить элемент" align="bottom">
  <IconButton icon={Add24} label="Добавить"/>
</Tooltip>
  • Tooltip обеспечивает дополнительное пояснение при наведении.
  • Выравнивание (align) и задержка появления настраиваются через свойства компонента.

Практические советы

  • Всегда указывать label, чтобы кнопка была доступной.
  • Использовать small для плотных интерфейсов и default для стандартного.
  • Комбинировать с Tooltip при ограниченном пространстве или непонятной иконке.
  • При использовании пользовательских иконок соблюдать размеры и контраст, чтобы не нарушать визуальный стиль интерфейса.
  • Для кнопок, меняющих состояние (например, “избранное”), использовать свойство active для визуальной обратной связи.

IconButton в Carbon Components Svelte позволяет создавать компактные, доступные и визуально чистые кнопки с иконками, интегрируемые в любые интерфейсы без потери стандартов UX и функциональности.

Оглавление