UI Components Easy
Alert Banner
Contextual alert banners in four semantic variants — info, success, warning, and error — with optional dismiss button and leading icon.
Open in Lab
MCP
css vanilla-js
Targets: JS HTML
Code
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Inter, system-ui, sans-serif;
background: #050910;
color: #f2f6ff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.demo {
width: 100%;
max-width: 620px;
}
.demo-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.375rem;
}
.demo-sub {
color: #475569;
font-size: 0.875rem;
margin-bottom: 2rem;
}
.alerts-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Alert base ── */
.alert {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem 1.125rem;
border-radius: 0.75rem;
border-left: 4px solid;
background: var(--alert-bg);
border-color: var(--alert-color);
transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
overflow: hidden;
}
.alert--dismissing {
opacity: 0;
transform: translateX(12px);
max-height: 0 !important;
padding-top: 0;
padding-bottom: 0;
margin-bottom: -0.75rem;
}
/* ── Variants ── */
.alert--info {
--alert-color: #38bdf8;
--alert-bg: rgba(56, 189, 248, 0.08);
}
.alert--success {
--alert-color: #22c55e;
--alert-bg: rgba(34, 197, 94, 0.08);
}
.alert--warning {
--alert-color: #f59e0b;
--alert-bg: rgba(245, 158, 11, 0.08);
}
.alert--error {
--alert-color: #ef4444;
--alert-bg: rgba(239, 68, 68, 0.08);
}
/* ── Icon ── */
.alert-icon {
font-size: 1rem;
line-height: 1.5;
color: var(--alert-color);
flex-shrink: 0;
margin-top: 0.05rem;
}
/* ── Body ── */
.alert-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.875rem;
line-height: 1.5;
}
.alert-title {
color: #f2f6ff;
font-weight: 600;
}
.alert-desc {
color: #94a3b8;
}
/* ── Dismiss ── */
.alert-dismiss {
flex-shrink: 0;
background: none;
border: none;
color: #475569;
cursor: pointer;
font-size: 1.2rem;
line-height: 1;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
transition: color 0.15s, background 0.15s;
}
.alert-dismiss:hover {
color: #f2f6ff;
background: rgba(255, 255, 255, 0.06);
}(function () {
document.querySelectorAll(".alert-dismiss").forEach(function (btn) {
btn.addEventListener("click", function () {
var alert = btn.closest(".alert");
if (!alert) return;
alert.style.maxHeight = alert.offsetHeight + "px";
requestAnimationFrame(function () {
alert.classList.add("alert--dismissing");
});
alert.addEventListener(
"transitionend",
function () {
alert.remove();
},
{ once: true }
);
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alert Banner</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
<h1 class="demo-title">Alert Banner</h1>
<p class="demo-sub">Four semantic variants, all dismissible.</p>
<div class="alerts-stack">
<!-- Info -->
<div class="alert alert--info" role="alert">
<span class="alert-icon" aria-hidden="true">ℹ</span>
<div class="alert-body">
<strong class="alert-title">Heads up</strong>
<span class="alert-desc">Your trial ends in 3 days. Upgrade to keep access to all features.</span>
</div>
<button class="alert-dismiss" aria-label="Dismiss">×</button>
</div>
<!-- Success -->
<div class="alert alert--success" role="alert">
<span class="alert-icon" aria-hidden="true">✓</span>
<div class="alert-body">
<strong class="alert-title">Changes saved</strong>
<span class="alert-desc">Your profile has been updated successfully.</span>
</div>
<button class="alert-dismiss" aria-label="Dismiss">×</button>
</div>
<!-- Warning -->
<div class="alert alert--warning" role="alert">
<span class="alert-icon" aria-hidden="true">⚠</span>
<div class="alert-body">
<strong class="alert-title">Storage almost full</strong>
<span class="alert-desc">You're using 92% of your storage quota. Free up space or upgrade.</span>
</div>
<button class="alert-dismiss" aria-label="Dismiss">×</button>
</div>
<!-- Error -->
<div class="alert alert--error" role="alert">
<span class="alert-icon" aria-hidden="true">✕</span>
<div class="alert-body">
<strong class="alert-title">Payment failed</strong>
<span class="alert-desc">We couldn't process your payment. Please check your card details and try again.</span>
</div>
<button class="alert-dismiss" aria-label="Dismiss">×</button>
</div>
<!-- No dismiss -->
<div class="alert alert--info alert--no-dismiss" role="alert">
<span class="alert-icon" aria-hidden="true">ℹ</span>
<div class="alert-body">
<strong class="alert-title">Read-only mode</strong>
<span class="alert-desc">You're viewing a shared document. Request edit access to make changes.</span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Alert Banner
Contextual feedback messages for user actions — four semantic variants, each dismissible.
Variants
| Variant | Color | Use case |
|---|---|---|
info | Blue | Informational messages, tips |
success | Green | Completed actions, confirmations |
warning | Amber | Caution, reversible actions |
error | Red | Failures, destructive outcomes |
Features
- Optional dismiss
×button — removes with a fade-out animation - Left accent border for quick visual scanning
- Icon prefix for each variant
- Accessible
role="alert"markup