Toast

Notification popups with entrance/exit animations. Click the buttons below to see live toasts appear and auto-dismiss.

Basic Colors (click to trigger)

<div class="flex flex-wrap gap-2">
  <button class="btn" onclick="showToast('default')">Default</button>
  <button class="btn color-info" onclick="showToast('info')">Info</button>
  <button class="btn color-success" onclick="showToast('success')">Success</button>
  <button class="btn color-warning" onclick="showToast('warning')">Warning</button>
  <button class="btn color-error" onclick="showToast('error')">Error</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="btn" onclick="showToast('default')">Default</button>
  <button class="btn color-info" onclick="showToast('info')">Info</button>
  <button class="btn color-success" onclick="showToast('success')">Success</button>
  <button class="btn color-warning" onclick="showToast('warning')">Warning</button>
  <button class="btn color-error" onclick="showToast('error')">Error</button>
</div>

Requires: tw.min.css

function showToast(type = 'default', position = 'bottom-end') {
  const container = document.getElementById('toast-' + position);
  const icons = {
    info: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>',
    success: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>',
    warning: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>',
    error: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>',
  };
  const messages = {
    default: 'This is a default toast.',
    info: 'Here is some useful information.',
    success: 'Action completed successfully!',
    warning: 'Please review before continuing.',
    error: 'Something went wrong.',
  };
  const colorClass = type === 'default' ? '' : ' color-' + type;
  const icon = icons[type] || '';
  const el = document.createElement('div');
  el.className = 'toast-item' + colorClass;
  el.innerHTML = icon + '<span>' + messages[type] + '</span>'
    + '<button class="toast-close" onclick="dismissToast(this)">'
    + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>'
    + '</button>';
  container.appendChild(el);
  setTimeout(() => dismissToast(el.querySelector('.toast-close')), 4000);
}

function dismissToast(btnOrItem) {
  const item = btnOrItem.closest
    ? btnOrItem.closest('.toast-item') || btnOrItem
    : btnOrItem;
  item.classList.add('toast-removing');
  item.addEventListener('animationend', () => item.remove());
}

Rich Toast (click to trigger)

<div class="flex flex-wrap gap-2">
  <button class="btn color-success" onclick="showRichToast('success')">Success Rich</button>
  <button class="btn color-error" onclick="showRichToast('error')">Error Rich</button>
  <button class="btn" onclick="showRichToast('light')">Light Variant</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="btn color-success" onclick="showRichToast('success')">Success Rich</button>
  <button class="btn color-error" onclick="showRichToast('error')">Error Rich</button>
  <button class="btn" onclick="showRichToast('light')">Light Variant</button>
</div>

Requires: tw.min.css

function showRichToast(type) {
  const container = document.getElementById('toast-bottom-end');
  const data = {
    success: {
      colorClass: 'color-success',
      icon: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>',
      title: 'File saved',
      message: 'Your changes have been saved successfully.',
      action: 'Undo',
    },
    error: {
      colorClass: 'color-error',
      icon: '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>',
      title: 'Upload failed',
      message: 'Could not upload image. Please try again.',
      action: 'Retry',
    },
    light: {
      colorClass: 'toast-light',
      icon: '<svg class="toast-icon text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>',
      title: 'New update available',
      message: 'Version 2.0 is ready to install.',
      action: 'Update',
    },
  };
  const d = data[type];
  const el = document.createElement('div');
  el.className = 'toast-item ' + d.colorClass;
  el.innerHTML = d.icon
    + '<div class="toast-content"><div class="toast-title">' + d.title + '</div><div class="toast-message">' + d.message + '</div></div>'
    + '<button class="toast-action">' + d.action + '</button>'
    + '<button class="toast-close" onclick="dismissToast(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg></button>';
  container.appendChild(el);
  setTimeout(() => { if (el.parentNode) dismissToast(el.querySelector('.toast-close')); }, 5000);
}

Progress Bar (auto-dismiss with timer)

<div class="flex flex-wrap gap-2">
  <button class="btn color-info" onclick="showProgressToast('info', 4000)">4s Info</button>
  <button class="btn color-success" onclick="showProgressToast('success', 3000)">3s Success</button>
  <button class="btn color-error" onclick="showProgressToast('error', 6000)">6s Error</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="btn color-info" onclick="showProgressToast('info', 4000)">4s Info</button>
  <button class="btn color-success" onclick="showProgressToast('success', 3000)">3s Success</button>
  <button class="btn color-error" onclick="showProgressToast('error', 6000)">6s Error</button>
</div>

Requires: tw.min.css

function showProgressToast(type, duration) {
  const container = document.getElementById('toast-bottom-end');
  const colorClass = type === 'default' ? '' : ' color-' + type;
  const el = document.createElement('div');
  el.className = 'toast-item' + colorClass;
  el.innerHTML = '<span>Auto-dismiss in ' + (duration / 1000) + 's</span>'
    + '<button class="toast-close" onclick="dismissToast(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg></button>'
    + '<div class="toast-progress"><div class="toast-progress-bar" style="width: 100%; transition-duration: ' + duration + 'ms;"></div></div>';
  container.appendChild(el);
  // Trigger reflow then animate
  requestAnimationFrame(() => {
    el.querySelector('.toast-progress-bar').style.width = '0%';
  });
  setTimeout(() => { if (el.parentNode) dismissToast(el.querySelector('.toast-close')); }, duration);
}

Positions (click to show in each corner)

<div class="flex flex-wrap gap-2">
  <button class="btn btn-sm" onclick="showToast('info', 'top-center')">Top Center</button>
  <button class="btn btn-sm" onclick="showToast('success', 'top-end')">Top End</button>
  <button class="btn btn-sm" onclick="showToast('warning', 'bottom-center')">Bottom Center</button>
  <button class="btn btn-sm" onclick="showToast('error', 'bottom-end')">Bottom End</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="btn btn-sm" onclick="showToast('info', 'top-center')">Top Center</button>
  <button class="btn btn-sm" onclick="showToast('success', 'top-end')">Top End</button>
  <button class="btn btn-sm" onclick="showToast('warning', 'bottom-center')">Bottom Center</button>
  <button class="btn btn-sm" onclick="showToast('error', 'bottom-end')">Bottom End</button>
</div>

Requires: tw.min.css

<!-- Position containers (place once in your layout) -->
<div class="toast toast-top toast-center" id="toast-top-center"></div>
<div class="toast toast-top toast-end" id="toast-top-end"></div>
<div class="toast toast-bottom toast-center" id="toast-bottom-center"></div>
<div class="toast toast-bottom toast-end" id="toast-bottom-end"></div>

// Then call showToast(type, position) with the container id suffix

Glass Variant

<button class="btn" onclick="showGlassToast()">Show Glass Toast</button>

Requires: ux.min.css

<button class="btn" onclick="showGlassToast()">Show Glass Toast</button>

Requires: tw.min.css

function showGlassToast() {
  const container = document.getElementById('toast-bottom-end');
  const el = document.createElement('div');
  el.className = 'toast-item glass';
  el.innerHTML = '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>'
    + '<span>Glass morphism toast</span>'
    + '<button class="toast-close" onclick="dismissToast(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg></button>';
  container.appendChild(el);
  setTimeout(() => { if (el.parentNode) dismissToast(el.querySelector('.toast-close')); }, 4000);
}

Stacked Toasts

<div class="flex flex-wrap gap-2">
  <button class="btn color-primary" onclick="showStack()">Show 4 Stacked</button>
  <button class="btn btn-outline" onclick="clearAllToasts()">Clear All</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="btn color-primary" onclick="showStack()">Show 4 Stacked</button>
  <button class="btn btn-outline" onclick="clearAllToasts()">Clear All</button>
</div>

Requires: tw.min.css

function showStack() {
  const types = ['info', 'success', 'warning', 'error'];
  types.forEach((type, i) => {
    setTimeout(() => showToast(type, 'bottom-end'), i * 200);
  });
}

function clearAllToasts() {
  document.querySelectorAll('.toast-item').forEach(item => {
    item.classList.add('toast-removing');
    item.addEventListener('animationend', () => item.remove());
  });
}

Color Variants (static)

Preview

Default toast

Info toast

Success toast

Warning toast

Error toast

Light variant

With title and message.

Glass toast

<div style="display: flex; flex-direction: column; gap: 0.5rem;">
  <div class="toast-item" style="animation: none;">
    <span>Default toast</span>
  </div>
  <div class="toast-item color-info" style="animation: none;">
    <svg class="toast-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
    <span>Info toast</span>
  </div>
  <div class="toast-item color-success" style="animation: none;">
    <svg class="toast-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
    <span>Success toast</span>
  </div>
  <div class="toast-item color-warning" style="animation: none;">
    <svg class="toast-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
    <span>Warning toast</span>
  </div>
  <div class="toast-item color-error" style="animation: none;">
    <svg class="toast-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
    <span>Error toast</span>
  </div>
  <div class="toast-item toast-light" style="animation: none;">
    <svg class="toast-icon text-info" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
    <div class="toast-content">
      <div class="toast-title">Light variant</div>
      <div class="toast-message">With title and message.</div>
    </div>
    <button class="toast-action">Action</button>
    <button class="toast-close">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
    </button>
  </div>
  <div class="toast-item glass" style="animation: none;">
    <span>Glass toast</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-neutral text-neutral-content text-sm">Default toast</div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-info text-info-content text-sm">
    <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
    Info toast
  </div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-success text-success-content text-sm">
    <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
    Success toast
  </div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-warning text-warning-content text-sm">
    <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
    Warning toast
  </div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-error text-error-content text-sm">
    <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
    Error toast
  </div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 bg-base-100 text-base-content text-sm border border-base-300">
    <svg class="size-5 shrink-0 text-info" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
    <div class="flex-1 min-w-0">
      <div class="font-semibold">Light variant</div>
      <div class="text-sm">With title and message.</div>
    </div>
    <button class="shrink-0 px-2 py-1 rounded-md font-semibold text-sm text-primary">Action</button>
  </div>
  <div class="flex items-center gap-3 rounded-2xl shadow-lg px-5 py-3.5 glass text-base-content text-sm">Glass toast</div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Classes Reference

Class	Description
.toast	Fixed positioning container
.toast-top	Position at top
.toast-bottom	Position at bottom
.toast-start	Align to start (left)
.toast-center	Center horizontally
.toast-end	Align to end (right)
.toast-middle	Center vertically
.toast-item	The notification element (animates in)
.toast-removing	Exit animation (add to dismiss)
.toast-light	Light variant (base bg + border)
.toast-item.glass	Glass morphism variant
.toast-icon	Icon element (20px)
.toast-content	Content wrapper (flex-1)
.toast-title	Toast heading
.toast-message	Toast body text
.toast-action	Action button
.toast-close	Dismiss button
.toast-progress	Progress bar container
.toast-progress-bar	Progress bar fill
.color-info/success/warning/error	Color variants on .toast-item