Banner
Full-width notification banners with colors, dismiss animation, sticky/fixed positioning.
Basic Banner
Preview
System update available
Version 2.0 is ready to install with new features and improvements.
<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">×</button>
</div> Requires: tw.min.css
// Dismiss: add banner-hidden class
// banner.classList.add('banner-hidden');
// Or remove the element after transition Color Variants
Preview
Info banner message
Success banner message
Warning banner message
Error banner message
<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 Filled Variants
Preview
Changes saved successfully!
Connection lost. Please check your network.
<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">×</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 | Class | Description |
|---|---|
.banner | Base banner container |
.banner-hidden | Dismiss animation |
.banner-sticky | Sticky to top |
.banner-fixed | Fixed to top |
.banner-icon | Leading icon (20px) |
.banner-content | Content wrapper |
.banner-title | Bold title text |
.banner-message | Message text |
.banner-actions | Action buttons area |
.banner-action | Action button |
.banner-close | Close/dismiss button |
.banner-info/success/warning/error | Tinted color variants |
.banner-info-filled | Solid info background |
.banner-success-filled | Solid success background |
.banner-warning-filled | Solid warning background |
.banner-error-filled | Solid error background |
.banner-inline | Inline card variant with border-radius |
.banner.glass | Glass morphism variant |