Alert

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

Обзор

Стилизация Alert разделена между семантической поверхностью корня и лёгкими дочерними частями, которые в основном наследуют цветовой контекст корня.

Публичные CSS-переменные

Changes saved

Переменная	Значение	Влияет на
Фон поверхности.`Alert`		В этом состоянии изменений не видно
Цвет переднего плана.`Alert`, дочерние части		В этом состоянии изменений не видно
Оформление рамки.`Alert`		В этом состоянии изменений не видно
Насыщенность, добавляемая к акцентному цвету в тонированном фоне.`Alert`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Alert: корневая поверхность сообщения.
AlertIcon: наследует семантический цвет.
AlertMain, AlertTitle, AlertContent: в основном наследуют цвет текста и ритм макета от корня.

Взаимодействие состояний и вариантов

variant меняет семейство семантических цветов.
appearance определяет, выглядит ли алерт залитой или обрамлённой поверхностью.
Дочерние части наследуют цвет, а не задают отдельные визуальные системы.

Примеры

.brandAlert {
  --alert-border-color: var(--border-color);
}

.softAlert {
  --alert-background-color: var(--surface-primary);
}

Что не переопределять

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