Alert

Паттерны

Встроенное сообщение обратной связи

Когда использовать:

• Локальному сценарию нужна короткая видимая обратная связь.

Заметки о композиции:

• Держите сообщение лаконичным.
• Добавляйте заголовок, только когда дополнительная иерархия действительно помогает.

Компромиссы:

• Сильная семантическая обратная связь.
• Плохо подходит для длинных объяснений.

import { FormEvent, useState } from 'react';
import {
  Alert,
  AlertContent,
  AlertIcon,
  AlertMain,
  AlertTitle,
  Button,
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndicator,
  CheckboxInput,

Предупреждение в настройках

Когда использовать:

• Странице или панели настроек нужно одно видимое предостережение или предварительное условие.

Заметки о композиции:

• Размещайте алерт рядом с настройкой, на которую он влияет.
• Не допускайте, чтобы предупреждение стало единственным местом, где объясняется настройка.

Компромиссы:

• Хорошая локальная заметность.
• Создаёт шум, если в каждом разделе по несколько алертов.

import { useState } from 'react';
import { Alert, AlertContent, AlertIcon, AlertMain, AlertTitle, Button, Text } from '@vega-ui/react';

const record = 'vega-site-verification=8c1f0b6e2d9a4f7b93e5c2a1d0f4e6b8a7c3d9e1f2b4a6c8d0e2f4a6b8c0d2e4';

export default function DomainVerification() {
  const [message, setMessage] = useState('');

  const copy = async () => {
    await navigator.clipboard.writeText(record);
    setMessage('Copied to clipboard.');
  };

Закрываемая обратная связь

Когда использовать:

• Алерт можно убрать после того, как пользователь с ним ознакомился.

Заметки о композиции:

• Закрытием должно управлять состояние на стороне потребителя.
• Действие закрытия должно быть вторичным по отношению к самому сообщению.

Компромиссы:

• Удобно для временной обратной связи.
• Легко злоупотребить, если важные алерты могут исчезнуть слишком рано.

import { useRef, useState } from 'react';
import type { CSSProperties } from 'react';
import { Alert, AlertContent, AlertIcon, AlertMain, AlertTitle, Button, Heading, Icon, IconButton } from '@vega-ui/react';
import { XIcon } from '@vega-ui/icons';

export default function Dismissible() {
  const [visible, setVisible] = useState(true);
  const headingRef = useRef<HTMLHeadingElement>(null);

  const dismiss = () => {
    setVisible(false);
    headingRef.current?.focus();

Сравнение

Быстрое правило выбора

Используйте Alert для коротких семантических сообщений обратной связи.

Alert и Badge

Используйте Alert, когда:

• интерфейсу нужно короткое сообщение с иерархией

Используйте Badge, когда:

• интерфейсу нужна лишь маленькая метка статуса

Главный компромисс: алерт — это паттерн сообщения, а бейдж — компактные метаданные.

Alert и Card

Используйте Alert, когда:

• содержимое — это обратная связь или статус

Используйте Card, когда:

• содержимое — сгруппированный макет или сводка

Главный компромисс: алерт ориентирован на обратную связь, а карточка — это поверхность-контейнер.

Alert и Link

Используйте Alert, когда:

• интерфейс сообщает о статусе или даёт обратную связь

Используйте Link, когда:

• текст предназначен для навигации, а не для объяснения статуса

Выбирайте этот компонент, когда

• Интерфейсу нужна короткая семантическая обратная связь.
• Важны серьёзность или смысл сообщения.
• Содержимому полезна необязательная иерархия из иконки и заголовка.
• сообщение должно оставаться содержимым, а не превращаться в контейнер для сценария

Не выбирайте этот компонент, когда

• Содержимое — лишь маленькая метка.
• Интерфейсу нужна поверхность для сгруппированного макета.
• Сообщение разрастается в более крупный сценарий.

Решение проблем

Алерт слишком велик для сообщения

Симптом

Текст настолько короткий, что алерт выглядит визуально тяжёлым.

Вероятная причина

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

Как проверить

• Проверьте, не является ли содержимое лишь маленькой меткой статуса.

Решение

• Перейдите на Badge или более простой встроенный текст, где это уместно.

Алерт выполняет работу макета вместо обратной связи

Симптом

Компонент начинает вести себя как постоянный блок контента, а не как сообщение обратной связи.

Вероятная причина

Alert выбран для сгруппированного макета, а не для статуса или обратной связи.

Как проверить

• Уберите семантическое обрамление сообщения и посмотрите, не является ли поверхность просто контейнером макета.

Решение

• Перейдите на Card для поверхностей со сгруппированным содержимым.
• Оставьте Alert для короткой семантической обратной связи.