Alert
Інлайн-повідомлення з п'ятьма тонами, стандартною іконкою та опційним закриттям.
Банер повідомлення для контексту на сторінці — не оверлей і не тост: він живе в потоці вмісту і не зникає сам.
Приклад
Заплановане обслуговування
Збережено
Помилка збереження
Чернетка
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
tone | infosuccesswarningdangerneutral | "info" | Смисловий тон: палітра, стандартна іконка й терміновість. |
title | string | "" | Заголовок — коротке твердження: «Сесію завершено». |
dismissible | boolean | false | Показує хрестик. Компонент САМ не ховається — лише повідомляє. |
Події
| Назва | Payload | Опис |
|---|---|---|
dismiss | [] | Натиснуто хрестик. Компонент не ховається сам — ховає батьківський стан. |
Слоти
| Назва | Опис |
|---|---|
default | Текст повідомлення. |
icon | Замінює стандартну іконку тону. |
actions | Кнопки дій під текстом. |
Коли використовувати
Для стану, що стосується вмісту поруч: результат дії над формою, попередження перед небезпечною секцією, банер ліміту.
Коли НЕ використовувати
Для миттєвих підтверджень дій («Збережено») є Toast — Alert не зникає сам і не має.
Не передавайте тон лише кольором: кожен тон має іконку, а danger —
role="alert", щоб скрінрідер повідомив негайно.
Доступність
role="alert" лише на danger: перебивати потік читання успіхами й
порадами так само погано, як мовчати про помилку. Хрестик має
aria-label="Закрити" і збільшену зону натискання (-m-1 p-1).