IconButton

IconButton — это специализированный компонент кнопки, предназначенный для отображения иконки вместо текста. Он идеально подходит для действий, которые можно выразить одним визуальным элементом, таких как «удалить», «редактировать», «закрыть» или «открыть меню». В Chakra UI компонент IconButton наследует все свойства стандартного Button, но при этом требует явного указания иконки через проп icon.

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

import { IconButton } from "@chakra-ui/react";
import { FaSearch } from "react-icons/fa";

<IconButton
  aria-label="Поиск"
  icon={<FaSearch />}
  onCl ick={() => console.log("Поиск")}
  colorScheme="blue"
/>

Ключевые моменты:

  • icon — обязательный проп, принимает JSX-элемент иконки. Обычно используются иконки из библиотек типа react-icons.
  • aria-label — обязательный проп для доступности (accessibility), так как кнопка не содержит текста.
  • onClick — функция-обработчик события нажатия.
  • colorScheme — задаёт цветовую схему кнопки, аналогично обычной кнопке Chakra UI.

Варианты размера и цвета

Компонент поддерживает стандартные размеры Chakra UI: sm, md, lg, а также цветовые схемы: blue, red, green, teal, purple и другие.

<IconButton
  aria-label="Закрыть"
  icon={<FaTimes />}
  size="lg"
  colorScheme="red"
/>
  • size определяет размер кнопки и иконки внутри.
  • variant управляет визуальным стилем: solid, outline, ghost, link, unstyled.
<IconButton
  aria-label="Настройки"
  icon={<FaCog />}
  variant="ghost"
  colorScheme="teal"
/>
  • solid — стандартная кнопка с фоновым цветом.
  • outline — кнопка с рамкой и прозрачным фоном.
  • ghost — минималистичная кнопка без фона, только при наведении выделяется.
  • link — выглядит как текстовая ссылка.
  • unstyled — без стилей, полностью контролируется стилями пользователя.

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

Chakra UI позволяет легко управлять состояниями кнопки:

<IconButton
  aria-label="Добавить"
  icon={<FaPlus />}
  isDisabled={true}  // кнопка неактивна
  isLoading={true}   // отображает индикатор загрузки
/>
  • isDisabled блокирует кнопку, делает её неинтерактивной.
  • isLoading заменяет иконку на индикатор загрузки (spinner), автоматически блокируя кнопку до завершения действия.
  • loadingText можно использовать вместе с isLoading, чтобы показать текст при загрузке, если иконка сопровождается подписью (в случае комбинированных кнопок).

Адаптивность и размер иконки

IconButton автоматически подбирает размер иконки под размер кнопки, но можно вручную настроить:

<IconButton
  aria-label="Поиск"
  icon={<FaSearch />}
  size="lg"
  fontSize="2xl"
/>
  • fontSize управляет размером иконки независимо от размера кнопки.

Комбинация с Tooltip

Часто IconButton используется вместе с Tooltip для улучшения UX:

import { Tooltip, IconButton } from "@chakra-ui/react";

<Tooltip label="Поиск">
  <IconButton
    aria-label="Поиск"
    icon={<FaSearch />}
    colorScheme="blue"
  />
</Tooltip>
  • Tooltip автоматически отображается при наведении, повышая доступность кнопки.

Кастомизация через стили

Chakra UI позволяет использовать проп sx или системные стили для тонкой настройки:

<IconButton
  aria-label="Удалить"
  icon={<FaTrash />}
  colorScheme="red"
  _hover={{ bg: "red.600", transform: "scale(1.1)" }}
  _active={{ bg: "red.700" }}
/>
  • _hover — стили при наведении мыши.
  • _active — стили при активном нажатии.
  • _focus — стили при фокусе для клавиатурной навигации.

IconButton в группах

Для создания нескольких кнопок с одинаковым стилем можно использовать ButtonGroup:

import { ButtonGroup, IconButton } from "@chakra-ui/react";
import { FaEdit, FaTrash } from "react-icons/fa";

<ButtonGroup spacing="4">
  <IconButton aria-label="Редактировать" icon={<FaEdit />} colorScheme="teal" />
  <IconButton aria-label="Удалить" icon={<FaTrash />} colorScheme="red" />
</ButtonGroup>
  • spacing задаёт расстояние между кнопками.
  • Кнопки наследуют общие свойства группы, что упрощает единообразное оформление.

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

Обязательное использование aria-label делает IconButton доступным для экранных читалок. Кроме того, Chakra UI автоматически обрабатывает фокус и состояние disabled, что облегчает соответствие стандартам WCAG.

  • aria-label описывает действие кнопки.
  • isDisabled и isLoading корректно взаимодействуют с клавиатурной навигацией.
  • Tooltip улучшает информативность для пользователей с ограниченным зрением.

Итоговые рекомендации по использованию

  1. Использовать IconButton для компактных действий без текстового контента.
  2. Всегда задавать aria-label для доступности.
  3. Применять Tooltip при необходимости дополнительного пояснения.
  4. Настраивать размеры через size и fontSize, чтобы иконка была визуально гармоничной.
  5. Использовать variant и colorScheme для единообразного визуального стиля в интерфейсе.
  6. Для групп кнопок применять ButtonGroup для упрощённого управления отступами и стилями.

Эти возможности делают IconButton гибким инструментом для создания чистых и интуитивных интерфейсов в Chakra UI.

Оглавление