Snackbar

<div class="snackbar-container">
  <div class="snackbar snackbar-visible">
    <div class="snackbar-content">
      <span class="snackbar-message">Item has been saved</span>
    </div>
    <button class="snackbar-action">UNDO</button>
    <button class="snackbar-close">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="fixed bottom-0 left-0 right-0 flex flex-col items-center p-4 z-60 pointer-events-none">
  <div class="flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-neutral text-neutral-content rounded-field shadow-lg pointer-events-auto">
    <span class="flex-1">Item has been saved</span>
    <button class="px-2 py-1 text-sm font-semibold uppercase text-primary bg-transparent border-none cursor-pointer">UNDO</button>
    <button class="flex items-center justify-center w-7 h-7 rounded-full border-none bg-transparent text-white/70 cursor-pointer">&times;</button>
  </div>
</div>

Requires: tw.min.css

// Show snackbar: add snackbar-visible class
// snackbar.classList.add('snackbar-visible');
// Hide: add snackbar-exiting, then remove after animation
// snackbar.classList.replace('snackbar-visible', 'snackbar-exiting');
// setTimeout(() => snackbar.remove(), 200);

<div class="flex flex-col gap-3">
  <div class="snackbar snackbar-visible snackbar-success" style="position:relative;transform:none;">
    <div class="snackbar-content"><span class="snackbar-message">File uploaded successfully</span></div>
  </div>
  <div class="snackbar snackbar-visible snackbar-warning" style="position:relative;transform:none;">
    <div class="snackbar-content"><span class="snackbar-message">Low disk space warning</span></div>
  </div>
  <div class="snackbar snackbar-visible snackbar-error" style="position:relative;transform:none;">
    <div class="snackbar-content"><span class="snackbar-message">Failed to save changes</span></div>
    <button class="snackbar-action">RETRY</button>
  </div>
  <div class="snackbar snackbar-visible snackbar-info" style="position:relative;transform:none;">
    <div class="snackbar-content"><span class="snackbar-message">New update available</span></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3">
  <div class="flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-success text-success-content rounded-field shadow-lg" style="position:relative;transform:none;">
    <span class="flex-1">File uploaded successfully</span>
  </div>
  <div class="flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-warning text-warning-content rounded-field shadow-lg" style="position:relative;transform:none;">
    <span class="flex-1">Low disk space warning</span>
  </div>
  <div class="flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-error text-error-content rounded-field shadow-lg" style="position:relative;transform:none;">
    <span class="flex-1">Failed to save changes</span>
    <button class="px-2 py-1 text-sm font-semibold uppercase text-error-content bg-transparent border-none cursor-pointer">RETRY</button>
  </div>
  <div class="flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-info text-info-content rounded-field shadow-lg" style="position:relative;transform:none;">
    <span class="flex-1">New update available</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for colors

<!-- Stacked layout (two lines) -->
<div class="snackbar snackbar-visible snackbar-stacked" style="position:relative;transform:none;">
  <div class="snackbar-content"><span class="snackbar-message">This is a longer message that wraps to multiple lines in stacked layout</span></div>
  <div class="snackbar-actions">
    <button class="snackbar-action">DISMISS</button>
    <button class="snackbar-action">VIEW</button>
  </div>
</div>

<!-- With progress bar -->
<div class="snackbar snackbar-visible snackbar-progress mt-4" style="position:relative;transform:none;">
  <div class="snackbar-content"><span class="snackbar-message">Auto-dismissing in 5s...</span></div>
  <div class="snackbar-progress-bar" style="width:60%;"></div>
</div>

Requires: ux.min.css

<!-- Stacked layout (two lines) -->
<div class="flex flex-col items-stretch gap-0 min-w-72 max-w-142 p-4 bg-neutral text-neutral-content rounded-field shadow-lg" style="position:relative;transform:none;">
  <span class="flex-1 mb-2">This is a longer message that wraps to multiple lines in stacked layout</span>
  <div class="flex justify-end gap-2">
    <button class="px-2 py-1 text-sm font-semibold uppercase text-primary bg-transparent border-none cursor-pointer">DISMISS</button>
    <button class="px-2 py-1 text-sm font-semibold uppercase text-primary bg-transparent border-none cursor-pointer">VIEW</button>
  </div>
</div>

<!-- With progress bar -->
<div class="relative flex items-center gap-4 min-h-12 min-w-72 max-w-142 px-4 py-2 bg-neutral text-neutral-content rounded-field shadow-lg overflow-hidden mt-4" style="position:relative;transform:none;">
  <span class="flex-1">Auto-dismissing in 5s...</span>
  <div class="absolute bottom-0 left-0 h-[3px] bg-white/40" style="width:60%;"></div>
</div>

Requires: tw.min.css

// Progress bar: animate width from 100% to 0% over duration
// Or use CSS animation: snackbar-progress