Уведомления, значки и загрузка

Интерфейс должен сообщать пользователю, что происходит: запись прошла успешно, курс новый, данные загружаются. Для этого в daisyUI есть четыре небольших компонента: alert, badge, toast и loading.

Уведомление alert

Alert — заметный блок с сообщением. Цвет берётся из цветов состояний: alert-info, alert-success, alert-warning, alert-error. Атрибут role="alert" заставляет программы чтения с экрана сразу озвучить сообщение:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex flex-col gap-2">
  <div role="alert" class="alert alert-success">
    <span>Вы записаны на курс «Основы HTML».</span>
  </div>
  <div role="alert" class="alert alert-warning alert-soft">
    <span>Доступ к курсу закончится через 3 дня.</span>
  </div>
</div>

Зелёная полоса с сообщением о записи и бледно-жёлтая с предупреждением: модификатор alert-soft делает заливку светлой. Есть также alert-outline и alert-dash.

Значок badge

Badge — маленькая метка рядом с текстом: «Новый», «Хит», число уроков.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="flex items-center gap-2 p-2 font-semibold">
  JavaScript с нуля
  <span class="badge badge-secondary">Новый</span>
  <span class="badge badge-outline badge-sm">24 урока</span>
</p>

Справа от названия курса розовый значок «Новый» и маленький значок с рамкой. Значки принимают те же модификаторы цвета, стиля и размера, что и кнопки.

Загрузка loading

Loading — анимированный индикатор ожидания. Вид выбирают модификатором: loading-spinner, loading-dots, loading-ring, loading-bars.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex items-center gap-4 p-2">
  <span class="loading loading-dots loading-lg"></span>
  <button class="btn btn-primary">
    <span class="loading loading-spinner"></span>
    Оплата...
  </button>
</div>

Слева три прыгающие точки, справа кнопка с крутящимся кружком — так показывают, что запрос уже отправлен.

Всплывающее уведомление toast

Toast — обёртка, которая прикрепляет уведомления к углу экрана поверх страницы. Внутрь кладут обычные alert. Скрипт ниже показывает уведомление по кнопке и убирает его через 3 секунды:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-48 p-4">
  <button id="save" class="btn">Сохранить прогресс</button>
</div>
<div id="toasts" class="toast toast-end"></div>
 
<script>
  document.getElementById('save').addEventListener('click', () => {
    const message = document.createElement('div');
    message.className = 'alert alert-info';
    message.textContent = 'Прогресс сохранён';
    document.getElementById('toasts').append(message);
    setTimeout(() => message.remove(), 3000);
  });
</script>

Нажмите кнопку — в правом нижнем углу появится синее уведомление и через 3 секунды исчезнет. Угол задают модификаторы toast-top, toast-bottom, toast-start, toast-center, toast-end.

Частая ошибка

Добавлять уведомления в toast и не удалять их. После нескольких нажатий в углу вырастает столбик одинаковых сообщений, который закрывает страницу. Каждое всплывающее уведомление убирайте — по таймеру через setTimeout или кнопкой закрытия.

Спасибо, что читаете!