Alerts, badges and loading

An interface should tell the user what is going on: enrollment succeeded, a course is new, data is loading. daisyUI has four small components for this: alert, badge, toast and loading.

The alert

An alert is a prominent block with a message. Its color comes from the status colors: alert-info, alert-success, alert-warning, alert-error. The role="alert" attribute makes screen readers announce the message right away:

<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>You are enrolled in "HTML basics".</span>
  </div>
  <div role="alert" class="alert alert-warning alert-soft">
    <span>Your course access ends in 3 days.</span>
  </div>
</div>

A green bar with the enrollment message and a pale yellow one with a warning: the alert-soft modifier makes the fill light. There are also alert-outline and alert-dash.

The badge

A badge is a small label next to text: "New", "Bestseller", a lesson count.

<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 from scratch
  <span class="badge badge-secondary">New</span>
  <span class="badge badge-outline badge-sm">24 lessons</span>
</p>

To the right of the course name there is a pink "New" badge and a small outlined badge. Badges take the same color, style and size modifiers as buttons.

Loading

Loading is an animated waiting indicator. Pick the look with a modifier: 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>
    Paying...
  </button>
</div>

On the left three bouncing dots, on the right a button with a spinning circle — this shows that the request has already been sent.

The toast

A toast is a wrapper that pins notifications to a corner of the screen on top of the page. Regular alert blocks go inside it. The script below shows a notification on a button click and removes it after 3 seconds:

<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">Save progress</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 = 'Progress saved';
    document.getElementById('toasts').append(message);
    setTimeout(() => message.remove(), 3000);
  });
</script>

Click the button — a blue notification appears in the bottom right corner and disappears after 3 seconds. The corner is set with the toast-top, toast-bottom, toast-start, toast-center and toast-end modifiers.

Common mistake

Adding notifications to a toast and never removing them. After a few clicks a column of identical messages grows in the corner and covers the page. Remove every pop-up notification — on a timer with setTimeout or with a close button.

Thanks for reading!