Отличия от Alert Dialog

Radix UI предоставляет ряд компонентов для создания модальных интерфейсов, среди которых Dialog и Alert Dialog занимают центральное место. Несмотря на схожесть в структуре и API, между ними существуют фундаментальные различия, которые важно учитывать при разработке пользовательских интерфейсов.

Основная концепция

Dialog — это универсальный модальный контейнер, который может содержать произвольный контент: формы, текст, изображения, списки или любые другие элементы. Его цель — предоставление дополнительной информации или взаимодействие с пользователем, не блокируя остальной интерфейс полностью, если требуется.

Alert Dialog — специализированный компонент, предназначенный для критических уведомлений или подтверждений действий, которые могут иметь необратимые последствия (например, удаление данных). Основной фокус здесь на безопасности и внимании пользователя.

Поведение и управление фокусом

  • Dialog управляет фокусом стандартным образом: при открытии фокус может оставаться на произвольном элементе внутри диалога.
  • Alert Dialog реализует строгую модель блокировки: только элементы внутри диалога доступны для взаимодействия, а все остальные элементы интерфейса недоступны до закрытия. Фокус автоматически переносится на первый интерактивный элемент и возвращается к исходному элементу после закрытия.

Это поведение обеспечивает соблюдение принципов доступности (a11y), так как предупреждает случайное взаимодействие с основной страницей при критических операциях.

Семантика и доступность

Alert Dialog использует aria-modal=“true” и role=“alertdialog”, что сообщает вспомогательным технологиям, что окно требует немедленного внимания.

Dialog, в свою очередь, обычно использует role=“dialog”. Это дает возможность вспомогательным устройствам понять контекст, но не обязательно сигнализирует о критическом характере содержимого.

API и свойства

Dialog поддерживает широкий набор пропсов, позволяющих кастомизировать поведение:

  • open и onOpenChange для управления состоянием отображения;
  • modal для переключения модальности;
  • overlay для создания фона и затемнения контента страницы.

Alert Dialog предоставляет упрощенный API:

  • Фокусируется на управлении блокировкой интерактивности;
  • Не предназначен для размещения произвольного контента — чаще всего используется с заголовком, сообщением и кнопками подтверждения/отмены.

Примеры ключевых пропсов:

<AlertDialog>
  <AlertDialogTrigger>Удалить</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Подтвердите удаление</AlertDialogTitle>
    <AlertDialogDescription>Это действие нельзя отменить.</AlertDialogDescription>
    <AlertDialogAction>Удалить</AlertDialogAction>
    <AlertDialogCancel>Отмена</AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

Визуальные отличия и стилизация

Dialog можно стилизовать абсолютно произвольно: менять размеры, добавлять анимации, использовать сложные макеты с сетками.

Alert Dialog требует минималистичного подхода: основная задача — донести критическое сообщение, поэтому рекомендуется лаконичный дизайн с выделением кнопок подтверждения/отмены и сохранением контраста для читабельности.

Использование в сценариях

  • Dialog подходит для:

    • Форм ввода данных;
    • Просмотра подробной информации;
    • Панелей с настройками.

  • Alert Dialog подходит для:

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

Итоговые различия в таблице

Характеристика Dialog Alert Dialog
Цель Любой модальный контент Критическое уведомление
Фокус Гибкий Строго внутри диалога
Роль ARIA dialog alertdialog
Контент Произвольный Минималистичный
Использование Формы, панели, окна Подтверждения, предупреждения
Модальность Настраиваемая Всегда модальная

Эти различия позволяют правильно подбирать компонент под конкретную задачу интерфейса, обеспечивая согласованность UX и соответствие стандартам доступности.

Оглавление