Alert

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

Базовая структура компонента выглядит так:

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

<Alert status="success">
  <AlertIcon />
  <AlertTitle>Успех!</AlertTitle>
  <AlertDescription>Ваши данные успешно сохранены.</AlertDescription>
</Alert>

Атрибуты status и их назначение

status определяет визуальный стиль алерта:

  • success — зеленый, для положительных уведомлений.
  • error — красный, для критических ошибок.
  • warning — желтый, для предупреждений.
  • info — синий, для информационных сообщений.

Пример использования разных статусов:

<Alert status="error">
  <AlertIcon />
  Ошибка при загрузке данных!
</Alert>

<Alert status="warning">
  <AlertIcon />
  Внимание! Ваши изменения не сохранены.
</Alert>

Варианты отображения

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

  • subtle — минималистичный, мягкий фон.
  • solid — яркий цветной фон.
  • left-accent — цветная полоска слева.
  • top-accent — цветная полоска сверху.

Пример:

<Alert status="info" variant="left-accent">
  <AlertIcon />
  Информация: новые обновления доступны.
</Alert>

<Alert status="warning" variant="solid">
  <AlertIcon />
  Предупреждение: недостаточно прав.
</Alert>

Использование компонентов AlertIcon, AlertTitle и AlertDescription

AlertIcon автоматически подбирает иконку под статус алерта. AlertTitle — заголовок уведомления, выделяется жирным шрифтом. AlertDescription — подробное описание или пояснение.

Пример комбинированного использования:

<Alert status="error" variant="subtle">
  <AlertIcon />
  <AlertTitle>Ошибка!</AlertTitle>
  <AlertDescription>Не удалось отправить форму, попробуйте позже.</AlertDescription>
</Alert>

Настройка цвета и темы

Можно изменять цветовую схему через colorScheme. Например:

<Alert status="success" colorScheme="teal">
  <AlertIcon />
  Операция выполнена успешно!
</Alert>

Значение colorScheme может быть любым доступным в Chakra UI, что позволяет интегрировать алерты в фирменный стиль приложения.

Адаптивность и доступность

Alert поддерживает ARIA-атрибуты автоматически. Статус алерта добавляется к role="alert", что обеспечивает уведомление скринридеров.

Компонент также адаптивен, корректно отображается на мобильных и десктопных устройствах без дополнительной настройки.

Динамическое управление

Alert можно показывать и скрывать программно с помощью состояния:

import { useState } from "react";
import { Alert, AlertIcon, Button } from "@chakra-ui/react";

function DynamicAlert() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onCl ick={() => setVisible(!visible)}>
        {visible ? "Скрыть уведомление" : "Показать уведомление"}
      </Button>

      {visible && (
        <Alert status="info" mt={4}>
          <AlertIcon />
          Это динамически отображаемое уведомление.
        </Alert>
      )}
    </>
  );
}

Композиция с другими компонентами Chakra UI

Alert легко интегрируется с Box, Stack, Flex, позволяя создавать сложные уведомления с кнопками и ссылками:

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

<Alert status="warning" variant="left-accent">
  <AlertIcon />
  <HStack spacing={4}>
    <AlertTitle>Внимание!</AlertTitle>
    <AlertDescription>Необходимо обновить данные.</AlertDescription>
    <Button size="sm" colorScheme="yellow">Обновить</Button>
  </HStack>
</Alert>

Анимация и переходы

Хотя Chakra UI не предоставляет встроенных анимаций для Alert, компонент легко оборачивается в AnimatePresence и motion.div из Framer Motion для плавного появления и исчезновения:

import { motion, AnimatePresence } from "framer-motion";
import { Alert, AlertIcon } from "@chakra-ui/react";

<AnimatePresence>
  {visible && (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      <Alert status="success">
        <AlertIcon />
        Данные успешно обновлены.
      </Alert>
    </motion.div>
  )}
</AnimatePresence>

Советы по использованию

  • Для кратких уведомлений достаточно AlertIcon и текста без AlertTitle.
  • Для ошибок и предупреждений рекомендуется использовать варианты solid или left-accent для привлечения внимания.
  • Для информационных сообщений чаще применяют subtle — не отвлекает пользователя от основной работы.
  • Использование mt, mb, p позволяет легко вписать алерты в общий макет страницы.

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

Оглавление