Banner

<div class="banner banner-info">
  <div class="banner-icon">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
  </div>
  <div class="banner-content">
    <p class="banner-title">System update available</p>
    <p class="banner-message">Version 2.0 is ready to install with new features and improvements.</p>
  </div>
  <div class="banner-actions">
    <button class="banner-action">Update now</button>
  </div>
  <button class="banner-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>

Requires: ux.min.css

<div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 border-b border-info/20 text-sm" style="background-color: color-mix(in oklch, var(--color-info) 10%, transparent)">
  <svg class="size-5 text-info shrink-0" ...></svg>
  <div class="flex-1 flex flex-col gap-0.5">
    <p class="font-semibold text-base-content m-0">System update available</p>
    <p class="m-0 text-base-content/60">Version 2.0 is ready to install.</p>
  </div>
  <button class="px-2 py-1 text-sm font-semibold text-info bg-transparent border-none cursor-pointer">Update now</button>
  <button class="flex items-center justify-center w-7 h-7 bg-transparent border-none text-base-content/40 cursor-pointer">&times;</button>
</div>

Requires: tw.min.css

// Dismiss: add banner-hidden class
// banner.classList.add('banner-hidden');
// Or remove the element after transition

<div class="flex flex-col gap-2">
  <div class="banner banner-info">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></div>
    <div class="banner-content"><p class="banner-message">Info banner message</p></div>
  </div>
  <div class="banner banner-success">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
    <div class="banner-content"><p class="banner-message">Success banner message</p></div>
  </div>
  <div class="banner banner-warning">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg></div>
    <div class="banner-content"><p class="banner-message">Warning banner message</p></div>
  </div>
  <div class="banner banner-error">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg></div>
    <div class="banner-content"><p class="banner-message">Error banner message</p></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 border-b border-info/20 text-sm" style="background-color: color-mix(in oklch, var(--color-info) 10%, transparent)">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-info shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
    <div class="flex-1"><p class="m-0 text-base-content/60">Info banner message</p></div>
  </div>
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 border-b border-success/20 text-sm" style="background-color: color-mix(in oklch, var(--color-success) 10%, transparent)">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-success shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    <div class="flex-1"><p class="m-0 text-base-content/60">Success banner message</p></div>
  </div>
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 border-b border-warning/20 text-sm" style="background-color: color-mix(in oklch, var(--color-warning) 10%, transparent)">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-warning shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>
    <div class="flex-1"><p class="m-0 text-base-content/60">Warning banner message</p></div>
  </div>
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 border-b border-error/20 text-sm" style="background-color: color-mix(in oklch, var(--color-error) 10%, transparent)">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-error shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>
    <div class="flex-1"><p class="m-0 text-base-content/60">Error banner message</p></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for colors

<div class="flex flex-col gap-2">
  <div class="banner banner-success-filled">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
    <div class="banner-content"><p class="banner-message">Changes saved successfully!</p></div>
    <button class="banner-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 class="banner banner-error-filled">
    <div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg></div>
    <div class="banner-content"><p class="banner-message">Connection lost. Please check your network.</p></div>
    <div class="banner-actions"><button class="banner-action">Retry</button></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 bg-success text-success-content text-sm border-none">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    <div class="flex-1"><p class="m-0">Changes saved successfully!</p></div>
    <button class="flex items-center justify-center w-7 h-7 bg-transparent border-none text-success-content/70 cursor-pointer">&times;</button>
  </div>
  <div class="flex items-center gap-4 w-full min-h-12 px-6 py-3 bg-error text-error-content text-sm border-none">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>
    <div class="flex-1"><p class="m-0">Connection lost. Please check your network.</p></div>
    <button class="px-2 py-1 text-sm font-semibold text-error-content bg-transparent border-none cursor-pointer">Retry</button>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required