CloseButton

Компонент CloseButton является специализированным элементом интерфейса в библиотеке Chakra UI, предназначенным для предоставления пользователю возможности закрывать модальные окна, уведомления, панели и другие интерактивные элементы. Он представляет собой кнопку с крестиком, автоматически стилизованную и адаптированную под дизайн Chakra UI.

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

Для использования CloseButton необходимо импортировать его из пакета @chakra-ui/react:

import { CloseButton } from "@chakra-ui/react";

Базовый пример использования:

<CloseButton />

По умолчанию кнопка имеет стандартный размер и цвет, который изменяется при наведении и фокусе.

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

Компонент поддерживает различные размеры через проп size. Допустимые значения:

  • "sm" — маленькая кнопка
  • "md" — средняя (по умолчанию)
  • "lg" — большая кнопка

Пример задания размера:

<CloseButton size="lg" />

Для изменения цвета используются пропсы color и colorScheme. Например:

<CloseButton color="red.500" />
<CloseButton colorScheme="green" />

Важно: colorScheme задаёт цветовую тему, которая автоматически подстраивает стили при наведении, фокусе и активном состоянии.

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

Компонент CloseButton поддерживает стандартные события кнопок в React: onClick, onMouseEnter, onMouseLeave и др. Наиболее часто используется onClick для закрытия модальных окон или уведомлений.

<CloseButton onCl ick={() => setIsOpen(false)} />

В этом примере кнопка вызывает функцию, изменяющую состояние isOpen на false, что закрывает компонент-оболочку (например, Alert или Drawer).

Использование внутри других компонентов Chakra UI

CloseButton часто применяется внутри модальных окон, панелей и уведомлений:

В модальном окне

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Заголовок модального окна</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      Содержимое модального окна
    </ModalBody>
  </ModalContent>
</Modal>

Здесь используется специализированная версия кнопки — ModalCloseButton, которая по сути является расширением CloseButton, встроенной в модальные компоненты Chakra UI с автоматическим управлением состоянием закрытия.

В уведомлениях (Alert)

import { Alert, AlertTitle, AlertDescription, CloseButton } from "@chakra-ui/react";

<Alert status="success">
  <AlertTitle>Успешно!</AlertTitle>
  <AlertDescription>Данные сохранены</AlertDescription>
  <CloseButton position="absolute" right="8px" top="8px" onCl ick={onClose} />
</Alert>

Обратите внимание на использование позиционирования через CSS (position="absolute"), чтобы разместить кнопку в верхнем правом углу уведомления.

Адаптация стилей

Chakra UI предоставляет гибкий механизм стилизации через систему style props. Для CloseButton можно использовать:

  • bg, background — фон кнопки
  • hover, focus, active состояния через псевдоклассы
  • borderRadius — скругление углов
  • boxShadow — тень

Пример кастомизации:

<CloseButton
  size="md"
  colorScheme="purple"
  _hover={{ bg: "purple.100" }}
  _focus={{ boxShadow: "outline" }}
  borderRadius="full"
/>

Доступность и управление фокусом

CloseButton автоматически включает атрибут aria-label="Close", что обеспечивает корректную работу с экранными читалками. Для использования в контексте других компонентов важно не удалять этот атрибут, чтобы сохранить доступность (accessibility).

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

Хотя CloseButton сам по себе визуализирует крестик, при необходимости его можно заменить или дополнить другой иконкой с помощью свойства children:

import { CloseIcon } from "@chakra-ui/icons";

<CloseButton>
  <CloseIcon />
</CloseButton>

Это позволяет интегрировать пользовательские иконки, сохраняя стилистику Chakra UI.

Вывод

CloseButton является минималистичным, но мощным инструментом для управления закрытием интерфейсных элементов. Его ключевые возможности:

  • Простой импорт и использование
  • Поддержка разных размеров и цветовых схем
  • Полная совместимость с событиями React
  • Лёгкая интеграция в модальные окна и уведомления
  • Гибкая кастомизация через style props
  • Доступность для пользователей с особыми потребностями

Его функциональность делает интерфейсы Chakra UI интуитивными и единообразными, обеспечивая корректное поведение кнопок закрытия во всех типах компонентов.

Оглавление