Alert

Компонент для отображения важных сообщений с разными вариантами (error, warning, success, info).

Установка

npx @capsuleui/core add Alert

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

Базовая alert

<capsule-alert>
  <capsule-alert-title>Заголовок alert</capsule-alert-title>
  <capsule-alert-description>Это описание alert.</capsule-alert-description>
</capsule-alert>

С иконкой

<capsule-alert>
  <svg
    width="16"
    height="16"
  >
    ...
  </svg>
  <capsule-alert-title>Alert с иконкой</capsule-alert-title>
  <capsule-alert-description>Сообщение alert</capsule-alert-description>
</capsule-alert>

Варианты

<capsule-alert variant="error">
  <capsule-alert-title>Ошибка</capsule-alert-title>
  <capsule-alert-description>Что-то пошло не так</capsule-alert-description>
</capsule-alert>

Компоненты

Компонент Alert состоит из нескольких подкомпонентов:

capsule-alert

Главный контейнер для alert сообщений.

capsule-alert-title

Заголовок alert сообщения.

<capsule-alert-title>Заголовок alert</capsule-alert-title>

capsule-alert-description

Описание alert сообщения.

<capsule-alert-description>Описание alert</capsule-alert-description>

Атрибуты

Атрибут	Тип	По умолчанию	Описание
variant	string	default	Вариант стиля alert

Значения variant

• default — Alert по умолчанию
• error — Alert ошибки с красными цветами
• warning — Alert предупреждения с желтыми/оранжевыми цветами
• success — Alert успеха с зелеными цветами
• info — Alert информации с синими цветами

Доступность

• ✅ ARIA role="alert" устанавливается автоматически
• ✅ Title имеет role="heading" с aria-level="2"
• ✅ Семантическая структура для screen readers