|$ curl https://forge-ai.dev/api/markdown?path=docs/components/alerts
$cat docs/alerts-&-notifications.md
updated Recently·16 min read·published
Alerts & Notifications
Introduction
Alerts communicate status, feedback, and errors to users. This guide covers production-ready alert patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including variants, dismissible alerts, banners, toasts, inline messages, outlined styles, and rich alerts with actions.
ℹ
info
Use role="alert" for critical messages and aria-live="polite" for non-critical updates. Never rely on color alone to convey meaning.
Alert Variants
Success, error, warning, and info alerts with matching inline SVG icons.
variants
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="alert success" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <span> |
| 8 | Settings saved successfully. |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="alert error" role="alert"> |
| 12 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 13 | <circle cx="12" cy="12" r="10"/> |
| 14 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 15 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 16 | </svg> |
| 17 | <span> |
| 18 | Failed to save. Please try again. |
| 19 | </span> |
| 20 | </div> |
| 21 | <div class="alert warning" role="alert"> |
| 22 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 24 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 25 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 26 | </svg> |
| 27 | <span> |
| 28 | Your session will expire in 5 minutes. |
| 29 | </span> |
| 30 | </div> |
| 31 | <div class="alert info" role="alert"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <circle cx="12" cy="12" r="10"/> |
| 34 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 35 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 36 | </svg> |
| 37 | <span> |
| 38 | A new update is available. |
| 39 | </span> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:440px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .alert { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:10px; |
| 23 | padding:12px 16px; |
| 24 | border-radius:8px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4 |
| 27 | } |
| 28 | .alert svg { |
| 29 | flex-shrink:0 |
| 30 | } |
| 31 | .success { |
| 32 | background:rgba(34, |
| 33 | 197, |
| 34 | 94, |
| 35 | .12); |
| 36 | border:1px solid rgba(34, |
| 37 | 197, |
| 38 | 94, |
| 39 | .25); |
| 40 | color:#22C55E |
| 41 | } |
| 42 | .error { |
| 43 | background:rgba(239, |
| 44 | 68, |
| 45 | 68, |
| 46 | .12); |
| 47 | border:1px solid rgba(239, |
| 48 | 68, |
| 49 | 68, |
| 50 | .25); |
| 51 | color:#EF4444 |
| 52 | } |
| 53 | .warning { |
| 54 | background:rgba(234, |
| 55 | 179, |
| 56 | 8, |
| 57 | .12); |
| 58 | border:1px solid rgba(234, |
| 59 | 179, |
| 60 | 8, |
| 61 | .25); |
| 62 | color:#EAB308 |
| 63 | } |
| 64 | .info { |
| 65 | background:rgba(59, |
| 66 | 130, |
| 67 | 246, |
| 68 | .12); |
| 69 | border:1px solid rgba(59, |
| 70 | 130, |
| 71 | 246, |
| 72 | .25); |
| 73 | color:#3B82F6 |
| 74 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-[440px] mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(34,197,94,0.12)] border border-[rgba(34,197,94,0.25)] text-[#22C55E]" role="alert"> |
| 3 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | Settings saved successfully. |
| 8 | </div> |
| 9 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(239,68,68,0.12)] border border-[rgba(239,68,68,0.25)] text-[#EF4444]" role="alert"> |
| 10 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 11 | <circle cx="12" cy="12" r="10"/> |
| 12 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 13 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 14 | </svg> |
| 15 | Failed to save. Please try again. |
| 16 | </div> |
| 17 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(234,179,8,0.12)] border border-[rgba(234,179,8,0.25)] text-[#EAB308]" role="alert"> |
| 18 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | Your session will expire in 5 minutes. |
| 24 | </div> |
| 25 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.25)] text-[#3B82F6]" role="alert"> |
| 26 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <circle cx="12" cy="12" r="10"/> |
| 28 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 29 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 30 | </svg> |
| 31 | A new update is available. |
| 32 | </div> |
| 33 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:440px"> |
| 2 | <div class="alert alert-success d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(34,197,94,.12);--bs-alert-border-color:rgba(34,197,94,.25);--bs-alert-color:#22C55E"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | Settings saved successfully. |
| 8 | </div> |
| 9 | <div class="alert alert-danger d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(239,68,68,.12);--bs-alert-border-color:rgba(239,68,68,.25);--bs-alert-color:#EF4444"> |
| 10 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 11 | <circle cx="12" cy="12" r="10"/> |
| 12 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 13 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 14 | </svg> |
| 15 | Failed to save. Please try again. |
| 16 | </div> |
| 17 | <div class="alert alert-warning d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(234,179,8,.12);--bs-alert-border-color:rgba(234,179,8,.25);--bs-alert-color:#EAB308"> |
| 18 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | Your session will expire in 5 minutes. |
| 24 | </div> |
| 25 | <div class="alert alert-info d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(59,130,246,.12);--bs-alert-border-color:rgba(59,130,246,.25);--bs-alert-color:#3B82F6"> |
| 26 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <circle cx="12" cy="12" r="10"/> |
| 28 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 29 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 30 | </svg> |
| 31 | A new update is available. |
| 32 | </div> |
| 33 | </div> |
Dismissible Alerts
Alerts with close buttons and optional undo action. Include JavaScript to animate removal.
dismissible
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="alert success" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <span class="flex-1"> |
| 8 | Message sent successfully. |
| 9 | </span> |
| 10 | <button class="undo"> |
| 11 | Undo |
| 12 | </button> |
| 13 | <button class="close" aria-label="Close"> |
| 14 | × |
| 15 | </button> |
| 16 | </div> |
| 17 | <div class="alert warning" role="alert"> |
| 18 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | <span class="flex-1"> |
| 24 | Low disk space. |
| 25 | </span> |
| 26 | <button class="close" aria-label="Close"> |
| 27 | × |
| 28 | </button> |
| 29 | </div> |
| 30 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:440px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .alert { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:10px; |
| 23 | padding:12px 16px; |
| 24 | border-radius:8px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | transition:all .3s ease |
| 28 | } |
| 29 | .alert svg { |
| 30 | flex-shrink:0 |
| 31 | } |
| 32 | .flex-1 { |
| 33 | flex:1 |
| 34 | } |
| 35 | .success { |
| 36 | background:rgba(34, |
| 37 | 197, |
| 38 | 94, |
| 39 | .12); |
| 40 | border:1px solid rgba(34, |
| 41 | 197, |
| 42 | 94, |
| 43 | .25); |
| 44 | color:#22C55E |
| 45 | } |
| 46 | .warning { |
| 47 | background:rgba(234, |
| 48 | 179, |
| 49 | 8, |
| 50 | .12); |
| 51 | border:1px solid rgba(234, |
| 52 | 179, |
| 53 | 8, |
| 54 | .25); |
| 55 | color:#EAB308 |
| 56 | } |
| 57 | .close { |
| 58 | background:none; |
| 59 | border:none; |
| 60 | color:inherit; |
| 61 | font-size:18px; |
| 62 | cursor:pointer; |
| 63 | opacity:.5; |
| 64 | padding:0 2px; |
| 65 | line-height:1 |
| 66 | } |
| 67 | .close:hover { |
| 68 | opacity:1 |
| 69 | } |
| 70 | .undo { |
| 71 | background:transparent; |
| 72 | border:1px solid currentColor; |
| 73 | border-radius:4px; |
| 74 | padding:3px 8px; |
| 75 | font-size:10px; |
| 76 | font-weight:600; |
| 77 | cursor:pointer; |
| 78 | color:inherit; |
| 79 | opacity:.8 |
| 80 | } |
| 81 | .undo:hover { |
| 82 | opacity:1 |
| 83 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.alert .close').forEach(btn=>{btn.addEventListener('click',()=>{const el=btn.closest('.alert');el.style.opacity='0';el.style.transform='translateX(20px)';setTimeout(()=>el.style.display='none',300)})}) |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-[440px] mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(34,197,94,0.12)] border border-[rgba(34,197,94,0.25)] text-[#22C55E]" role="alert"> |
| 3 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <span class="flex-1"> |
| 8 | Message sent successfully. |
| 9 | </span> |
| 10 | <button class="px-2 py-0.5 text-[10px] font-semibold border border-current rounded opacity-80 hover:opacity-100"> |
| 11 | Undo |
| 12 | </button> |
| 13 | <button aria-label="Close" class="text-lg leading-none opacity-50 hover:opacity-100"> |
| 14 | × |
| 15 | </button> |
| 16 | </div> |
| 17 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-[rgba(234,179,8,0.12)] border border-[rgba(234,179,8,0.25)] text-[#EAB308]" role="alert"> |
| 18 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | <span class="flex-1"> |
| 24 | Low disk space. |
| 25 | </span> |
| 26 | <button aria-label="Close" class="text-lg leading-none opacity-50 hover:opacity-100"> |
| 27 | × |
| 28 | </button> |
| 29 | </div> |
| 30 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:440px"> |
| 2 | <div class="alert alert-success d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(34,197,94,.12);--bs-alert-border-color:rgba(34,197,94,.25);--bs-alert-color:#22C55E"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <span class="flex-grow-1"> |
| 8 | Message sent successfully. |
| 9 | </span> |
| 10 | <button class="btn btn-sm btn-outline-success" style="--bs-btn-color:#22C55E;--bs-btn-border-color:#22C55E;--bs-btn-hover-bg:rgba(34,197,94,.08);--bs-btn-hover-border-color:#22C55E;--bs-btn-hover-color:#22C55E;font-size:10px;padding:2px 8px"> |
| 11 | Undo |
| 12 | </button> |
| 13 | <button class="btn-close" aria-label="Close" style="filter:invert(1) grayscale(100%) brightness(200%)"> |
| 14 | </button> |
| 15 | </div> |
| 16 | <div class="alert alert-warning d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:rgba(234,179,8,.12);--bs-alert-border-color:rgba(234,179,8,.25);--bs-alert-color:#EAB308"> |
| 17 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 19 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 20 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 21 | </svg> |
| 22 | <span class="flex-grow-1"> |
| 23 | Low disk space. |
| 24 | </span> |
| 25 | <button class="btn-close" aria-label="Close" style="filter:invert(1) grayscale(100%) brightness(200%)"> |
| 26 | </button> |
| 27 | </div> |
| 28 | </div> |
Toast Notifications
Corner-positioned toast notifications with slide-in animation and optional close control.
toast
Live
untitled.html
HTML
| 1 | <div class="container"> |
| 2 | <div class="toast success" role="status"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div> |
| 8 | <strong> |
| 9 | Saved! |
| 10 | </strong> |
| 11 | <p> |
| 12 | Your changes have been saved. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="toast error" role="alert"> |
| 17 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="10"/> |
| 19 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 20 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 21 | </svg> |
| 22 | <div> |
| 23 | <strong> |
| 24 | Error |
| 25 | </strong> |
| 26 | <p> |
| 27 | Could not connect to server. |
| 28 | </p> |
| 29 | </div> |
| 30 | <span class="t-close" aria-label="Close"> |
| 31 | × |
| 32 | </span> |
| 33 | </div> |
| 34 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .container { |
| 13 | position:relative; |
| 14 | min-height:220px; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | align-items:flex-end; |
| 18 | gap:10px; |
| 19 | padding:24px |
| 20 | } |
| 21 | .toast { |
| 22 | display:flex; |
| 23 | align-items:flex-start; |
| 24 | gap:10px; |
| 25 | padding:14px; |
| 26 | border-radius:10px; |
| 27 | max-width:340px; |
| 28 | box-shadow:0 8px 24px rgba(0, |
| 29 | 0, |
| 30 | 0, |
| 31 | .4); |
| 32 | animation:slideIn .3s ease |
| 33 | } |
| 34 | @keyframes slideIn { |
| 35 | from { |
| 36 | opacity:0; |
| 37 | transform:translateX(24px) |
| 38 | } |
| 39 | to { |
| 40 | opacity:1; |
| 41 | transform:translateX(0) |
| 42 | } |
| 43 | } |
| 44 | .toast svg { |
| 45 | flex-shrink:0; |
| 46 | margin-top:2px |
| 47 | } |
| 48 | .toast strong { |
| 49 | font-size:12px; |
| 50 | display:block |
| 51 | } |
| 52 | .toast p { |
| 53 | font-size:11px; |
| 54 | margin:2px 0 0; |
| 55 | opacity:.8 |
| 56 | } |
| 57 | .success { |
| 58 | background:#0A1A0A; |
| 59 | border:1px solid rgba(34, |
| 60 | 197, |
| 61 | 94, |
| 62 | .3); |
| 63 | color:#22C55E |
| 64 | } |
| 65 | .error { |
| 66 | background:#1A0A0A; |
| 67 | border:1px solid rgba(239, |
| 68 | 68, |
| 69 | 68, |
| 70 | .3); |
| 71 | color:#EF4444 |
| 72 | } |
| 73 | .t-close { |
| 74 | margin-left:auto; |
| 75 | cursor:pointer; |
| 76 | opacity:.5; |
| 77 | font-size:18px; |
| 78 | line-height:1 |
| 79 | } |
| 80 | .t-close:hover { |
| 81 | opacity:1 |
| 82 | } |
untitled.html
HTML
| 1 | <div class="relative min-h-[220px] flex flex-col items-end gap-2.5 p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 p-3.5 rounded-xl max-w-[340px] bg-[#0A1A0A] border border-[rgba(34,197,94,0.3)] text-[#22C55E] shadow-xl" role="status"> |
| 3 | <svg class="w-4 h-4 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div> |
| 8 | <strong class="block text-xs"> |
| 9 | Saved! |
| 10 | </strong> |
| 11 | <p class="text-[11px] mt-0.5 opacity-80"> |
| 12 | Your changes have been saved. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex items-start gap-2.5 p-3.5 rounded-xl max-w-[340px] bg-[#1A0A0A] border border-[rgba(239,68,68,0.3)] text-[#EF4444] shadow-xl" role="alert"> |
| 17 | <svg class="w-4 h-4 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="10"/> |
| 19 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 20 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 21 | </svg> |
| 22 | <div> |
| 23 | <strong class="block text-xs"> |
| 24 | Error |
| 25 | </strong> |
| 26 | <p class="text-[11px] mt-0.5 opacity-80"> |
| 27 | Could not connect to server. |
| 28 | </p> |
| 29 | </div> |
| 30 | <span class="ml-auto text-lg leading-none opacity-50 hover:opacity-100 cursor-pointer" aria-label="Close"> |
| 31 | × |
| 32 | </span> |
| 33 | </div> |
| 34 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column align-items-end gap-2 p-4" style="min-height:220px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-2 shadow-lg" role="status" style="max-width:340px;--bs-alert-bg:#0A1A0A;--bs-alert-border-color:rgba(34,197,94,.3);--bs-alert-color:#22C55E"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-top:2px;flex-shrink:0"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div> |
| 8 | <div class="fw-semibold" style="font-size:12px"> |
| 9 | Saved! |
| 10 | </div> |
| 11 | <div style="font-size:11px;opacity:.8"> |
| 12 | Your changes have been saved. |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="alert alert-danger d-flex align-items-start gap-2 shadow-lg" role="alert" style="max-width:340px;--bs-alert-bg:#1A0A0A;--bs-alert-border-color:rgba(239,68,68,.3);--bs-alert-color:#EF4444"> |
| 17 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-top:2px;flex-shrink:0"> |
| 18 | <circle cx="12" cy="12" r="10"/> |
| 19 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 20 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 21 | </svg> |
| 22 | <div> |
| 23 | <div class="fw-semibold" style="font-size:12px"> |
| 24 | Error |
| 25 | </div> |
| 26 | <div style="font-size:11px;opacity:.8"> |
| 27 | Could not connect to server. |
| 28 | </div> |
| 29 | </div> |
| 30 | <button class="btn-close ms-auto" aria-label="Close" style="filter:invert(1) grayscale(100%) brightness(200%)"> |
| 31 | </button> |
| 32 | </div> |
| 33 | </div> |
Inline Alerts
Compact inline alerts for form fields and small UI areas.
inline
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="inline error" role="alert"> |
| 3 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <circle cx="12" cy="12" r="10"/> |
| 5 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 6 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 7 | </svg> |
| 8 | Please enter a valid email address. |
| 9 | </div> |
| 10 | <div class="inline success" role="status"> |
| 11 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 13 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 14 | </svg> |
| 15 | Username is available. |
| 16 | </div> |
| 17 | <div class="inline warning" role="alert"> |
| 18 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | Password must be at least 8 characters. |
| 24 | </div> |
| 25 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:8px; |
| 16 | max-width:380px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .inline { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:6px; |
| 23 | padding:8px 12px; |
| 24 | border-radius:6px; |
| 25 | font-size:11px; |
| 26 | line-height:1.3 |
| 27 | } |
| 28 | .inline svg { |
| 29 | flex-shrink:0 |
| 30 | } |
| 31 | .error { |
| 32 | background:rgba(239, |
| 33 | 68, |
| 34 | 68, |
| 35 | .08); |
| 36 | color:#EF4444 |
| 37 | } |
| 38 | .success { |
| 39 | background:rgba(34, |
| 40 | 197, |
| 41 | 94, |
| 42 | .08); |
| 43 | color:#22C55E |
| 44 | } |
| 45 | .warning { |
| 46 | background:rgba(234, |
| 47 | 179, |
| 48 | 8, |
| 49 | .08); |
| 50 | color:#EAB308 |
| 51 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2 max-w-[380px] mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-1.5 px-3 py-2 rounded-md text-[11px] bg-[rgba(239,68,68,0.08)] text-[#EF4444]" role="alert"> |
| 3 | <svg class="w-3 h-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <circle cx="12" cy="12" r="10"/> |
| 5 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 6 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 7 | </svg> |
| 8 | Please enter a valid email address. |
| 9 | </div> |
| 10 | <div class="flex items-center gap-1.5 px-3 py-2 rounded-md text-[11px] bg-[rgba(34,197,94,0.08)] text-[#22C55E]" role="status"> |
| 11 | <svg class="w-3 h-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 13 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 14 | </svg> |
| 15 | Username is available. |
| 16 | </div> |
| 17 | <div class="flex items-center gap-1.5 px-3 py-2 rounded-md text-[11px] bg-[rgba(234,179,8,0.08)] text-[#EAB308]" role="alert"> |
| 18 | <svg class="w-3 h-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | Password must be at least 8 characters. |
| 24 | </div> |
| 25 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:380px"> |
| 2 | <div class="alert alert-danger d-flex align-items-center gap-1" role="alert" style="--bs-alert-bg:rgba(239,68,68,.08);--bs-alert-border-color:rgba(239,68,68,.15);--bs-alert-color:#EF4444;font-size:11px;padding:6px 10px"> |
| 3 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <circle cx="12" cy="12" r="10"/> |
| 5 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 6 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 7 | </svg> |
| 8 | Please enter a valid email address. |
| 9 | </div> |
| 10 | <div class="alert alert-success d-flex align-items-center gap-1" role="status" style="--bs-alert-bg:rgba(34,197,94,.08);--bs-alert-border-color:rgba(34,197,94,.15);--bs-alert-color:#22C55E;font-size:11px;padding:6px 10px"> |
| 11 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 13 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 14 | </svg> |
| 15 | Username is available. |
| 16 | </div> |
| 17 | <div class="alert alert-warning d-flex align-items-center gap-1" role="alert" style="--bs-alert-bg:rgba(234,179,8,.08);--bs-alert-border-color:rgba(234,179,8,.15);--bs-alert-color:#EAB308;font-size:11px;padding:6px 10px"> |
| 18 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | Password must be at least 8 characters. |
| 24 | </div> |
| 25 | </div> |
Outlined Alerts
Transparent-background alerts with strong borders for subtle emphasis.
outlined
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="alert success" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <span> |
| 8 | Deployment completed. |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="alert error" role="alert"> |
| 12 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 13 | <circle cx="12" cy="12" r="10"/> |
| 14 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 15 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 16 | </svg> |
| 17 | <span> |
| 18 | Build failed — check the logs. |
| 19 | </span> |
| 20 | </div> |
| 21 | <div class="alert warning" role="alert"> |
| 22 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 23 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 24 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 25 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 26 | </svg> |
| 27 | <span> |
| 28 | API rate limit at 80%. |
| 29 | </span> |
| 30 | </div> |
| 31 | <div class="alert info" role="alert"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <circle cx="12" cy="12" r="10"/> |
| 34 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 35 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 36 | </svg> |
| 37 | <span> |
| 38 | Tip: use keyboard shortcuts. |
| 39 | </span> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:440px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .alert { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:10px; |
| 23 | padding:12px 16px; |
| 24 | border-radius:8px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | background:transparent |
| 28 | } |
| 29 | .alert svg { |
| 30 | flex-shrink:0 |
| 31 | } |
| 32 | .success { |
| 33 | border:1.5px solid #22C55E; |
| 34 | color:#22C55E |
| 35 | } |
| 36 | .error { |
| 37 | border:1.5px solid #EF4444; |
| 38 | color:#EF4444 |
| 39 | } |
| 40 | .warning { |
| 41 | border:1.5px solid #EAB308; |
| 42 | color:#EAB308 |
| 43 | } |
| 44 | .info { |
| 45 | border:1.5px solid #3B82F6; |
| 46 | color:#3B82F6 |
| 47 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-[440px] mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-transparent border-[1.5px] border-[#22C55E] text-[#22C55E]" role="alert"> |
| 3 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | Deployment completed. |
| 8 | </div> |
| 9 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-transparent border-[1.5px] border-[#EF4444] text-[#EF4444]" role="alert"> |
| 10 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 11 | <circle cx="12" cy="12" r="10"/> |
| 12 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 13 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 14 | </svg> |
| 15 | Build failed — check the logs. |
| 16 | </div> |
| 17 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-transparent border-[1.5px] border-[#EAB308] text-[#EAB308]" role="alert"> |
| 18 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | API rate limit at 80%. |
| 24 | </div> |
| 25 | <div class="flex items-center gap-2.5 px-4 py-3 rounded-lg text-xs bg-transparent border-[1.5px] border-[#3B82F6] text-[#3B82F6]" role="alert"> |
| 26 | <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <circle cx="12" cy="12" r="10"/> |
| 28 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 29 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 30 | </svg> |
| 31 | Tip: use keyboard shortcuts. |
| 32 | </div> |
| 33 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:440px"> |
| 2 | <div class="alert d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:transparent;--bs-alert-border-color:#22C55E;--bs-alert-color:#22C55E;border-width:1.5px"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | Deployment completed. |
| 8 | </div> |
| 9 | <div class="alert d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:transparent;--bs-alert-border-color:#EF4444;--bs-alert-color:#EF4444;border-width:1.5px"> |
| 10 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 11 | <circle cx="12" cy="12" r="10"/> |
| 12 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 13 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 14 | </svg> |
| 15 | Build failed — check the logs. |
| 16 | </div> |
| 17 | <div class="alert d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:transparent;--bs-alert-border-color:#EAB308;--bs-alert-color:#EAB308;border-width:1.5px"> |
| 18 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 20 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 21 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 22 | </svg> |
| 23 | API rate limit at 80%. |
| 24 | </div> |
| 25 | <div class="alert d-flex align-items-center gap-2" role="alert" style="--bs-alert-bg:transparent;--bs-alert-border-color:#3B82F6;--bs-alert-color:#3B82F6;border-width:1.5px"> |
| 26 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <circle cx="12" cy="12" r="10"/> |
| 28 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 29 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 30 | </svg> |
| 31 | Tip: use keyboard shortcuts. |
| 32 | </div> |
| 33 | </div> |
Rich Alerts with Actions
Detailed alerts with title, description, icon, and action buttons.
rich
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="rich success" role="alert"> |
| 3 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div class="body"> |
| 8 | <strong> |
| 9 | Payment successful |
| 10 | </strong> |
| 11 | <p> |
| 12 | Your invoice #4921 has been paid. A receipt has been emailed to you. |
| 13 | </p> |
| 14 | </div> |
| 15 | <div class="actions"> |
| 16 | <button class="primary"> |
| 17 | View Receipt |
| 18 | </button> |
| 19 | <button class="secondary"> |
| 20 | Dismiss |
| 21 | </button> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="rich warning" role="alert"> |
| 25 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 27 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 28 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 29 | </svg> |
| 30 | <div class="body"> |
| 31 | <strong> |
| 32 | Storage warning |
| 33 | </strong> |
| 34 | <p> |
| 35 | You have used 92% of your storage quota. Upgrade to avoid upload failures. |
| 36 | </p> |
| 37 | </div> |
| 38 | <div class="actions"> |
| 39 | <button class="primary"> |
| 40 | Upgrade |
| 41 | </button> |
| 42 | <button class="secondary"> |
| 43 | Later |
| 44 | </button> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:12px; |
| 16 | max-width:480px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .rich { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:12px; |
| 23 | padding:16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4 |
| 27 | } |
| 28 | .rich svg { |
| 29 | flex-shrink:0 |
| 30 | } |
| 31 | .rich strong { |
| 32 | display:block; |
| 33 | font-size:13px; |
| 34 | margin-bottom:4px |
| 35 | } |
| 36 | .rich p { |
| 37 | margin:0; |
| 38 | opacity:.85; |
| 39 | font-size:11px; |
| 40 | line-height:1.4 |
| 41 | } |
| 42 | .body { |
| 43 | flex:1 |
| 44 | } |
| 45 | .actions { |
| 46 | display:flex; |
| 47 | gap:8px; |
| 48 | margin-top:10px |
| 49 | } |
| 50 | .actions button { |
| 51 | padding:6px 12px; |
| 52 | border-radius:6px; |
| 53 | font-size:11px; |
| 54 | font-weight:600; |
| 55 | cursor:pointer; |
| 56 | border:none; |
| 57 | transition:all .2s |
| 58 | } |
| 59 | .actions .primary { |
| 60 | background:#00FF41; |
| 61 | color:#0A0A0A |
| 62 | } |
| 63 | .actions .primary:hover { |
| 64 | background:#00E63A |
| 65 | } |
| 66 | .actions .secondary { |
| 67 | background:transparent; |
| 68 | border:1px solid currentColor; |
| 69 | color:inherit; |
| 70 | opacity:.8 |
| 71 | } |
| 72 | .actions .secondary:hover { |
| 73 | opacity:1 |
| 74 | } |
| 75 | .success { |
| 76 | background:rgba(34, |
| 77 | 197, |
| 78 | 94, |
| 79 | .12); |
| 80 | border:1px solid rgba(34, |
| 81 | 197, |
| 82 | 94, |
| 83 | .25); |
| 84 | color:#22C55E |
| 85 | } |
| 86 | .warning { |
| 87 | background:rgba(234, |
| 88 | 179, |
| 89 | 8, |
| 90 | .12); |
| 91 | border:1px solid rgba(234, |
| 92 | 179, |
| 93 | 8, |
| 94 | .25); |
| 95 | color:#EAB308 |
| 96 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-3 max-w-[480px] mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-3 p-4 rounded-xl text-xs bg-[rgba(34,197,94,0.12)] border border-[rgba(34,197,94,0.25)] text-[#22C55E]" role="alert"> |
| 3 | <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div class="flex-1"> |
| 8 | <strong class="block text-[13px] mb-1"> |
| 9 | Payment successful |
| 10 | </strong> |
| 11 | <p class="m-0 opacity-85 text-[11px] leading-relaxed"> |
| 12 | Your invoice #4921 has been paid. A receipt has been emailed to you. |
| 13 | </p> |
| 14 | <div class="flex gap-2 mt-2.5"> |
| 15 | <button class="px-3 py-1.5 rounded-md text-[11px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-colors"> |
| 16 | View Receipt |
| 17 | </button> |
| 18 | <button class="px-3 py-1.5 rounded-md text-[11px] font-semibold bg-transparent border border-current opacity-80 hover:opacity-100 transition-colors"> |
| 19 | Dismiss |
| 20 | </button> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="flex items-start gap-3 p-4 rounded-xl text-xs bg-[rgba(234,179,8,0.12)] border border-[rgba(234,179,8,0.25)] text-[#EAB308]" role="alert"> |
| 25 | <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 27 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 28 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 29 | </svg> |
| 30 | <div class="flex-1"> |
| 31 | <strong class="block text-[13px] mb-1"> |
| 32 | Storage warning |
| 33 | </strong> |
| 34 | <p class="m-0 opacity-85 text-[11px] leading-relaxed"> |
| 35 | You have used 92% of your storage quota. Upgrade to avoid upload failures. |
| 36 | </p> |
| 37 | <div class="flex gap-2 mt-2.5"> |
| 38 | <button class="px-3 py-1.5 rounded-md text-[11px] font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-colors"> |
| 39 | Upgrade |
| 40 | </button> |
| 41 | <button class="px-3 py-1.5 rounded-md text-[11px] font-semibold bg-transparent border border-current opacity-80 hover:opacity-100 transition-colors"> |
| 42 | Later |
| 43 | </button> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 mx-auto" style="max-width:480px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-3" role="alert" style="--bs-alert-bg:rgba(34,197,94,.12);--bs-alert-border-color:rgba(34,197,94,.25);--bs-alert-color:#22C55E"> |
| 3 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0"> |
| 4 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 5 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 6 | </svg> |
| 7 | <div class="flex-grow-1"> |
| 8 | <div class="fw-semibold" style="font-size:13px"> |
| 9 | Payment successful |
| 10 | </div> |
| 11 | <div style="font-size:11px;opacity:.85"> |
| 12 | Your invoice #4921 has been paid. A receipt has been emailed to you. |
| 13 | </div> |
| 14 | <div class="d-flex gap-2 mt-2"> |
| 15 | <button class="btn btn-success btn-sm fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;font-size:11px"> |
| 16 | View Receipt |
| 17 | </button> |
| 18 | <button class="btn btn-sm fw-semibold" style="--bs-btn-color:#22C55E;--bs-btn-border-color:#22C55E;--bs-btn-bg:transparent;--bs-btn-hover-bg:rgba(34,197,94,.08);--bs-btn-hover-border-color:#22C55E;--bs-btn-hover-color:#22C55E;font-size:11px"> |
| 19 | Dismiss |
| 20 | </button> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="alert alert-warning d-flex align-items-start gap-3" role="alert" style="--bs-alert-bg:rgba(234,179,8,.12);--bs-alert-border-color:rgba(234,179,8,.25);--bs-alert-color:#EAB308"> |
| 25 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0"> |
| 26 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/> |
| 27 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 28 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 29 | </svg> |
| 30 | <div class="flex-grow-1"> |
| 31 | <div class="fw-semibold" style="font-size:13px"> |
| 32 | Storage warning |
| 33 | </div> |
| 34 | <div style="font-size:11px;opacity:.85"> |
| 35 | You have used 92% of your storage quota. Upgrade to avoid upload failures. |
| 36 | </div> |
| 37 | <div class="d-flex gap-2 mt-2"> |
| 38 | <button class="btn btn-success btn-sm fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A;font-size:11px"> |
| 39 | Upgrade |
| 40 | </button> |
| 41 | <button class="btn btn-sm fw-semibold" style="--bs-btn-color:#EAB308;--bs-btn-border-color:#EAB308;--bs-btn-bg:transparent;--bs-btn-hover-bg:rgba(234,179,8,.08);--bs-btn-hover-border-color:#EAB308;--bs-btn-hover-color:#EAB308;font-size:11px"> |
| 42 | Later |
| 43 | </button> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
Accessibility
Alerts must be perceivable and understandable for all users. Pair color with icons and text, and manage focus for dynamic notifications.
- Use role="alert" for errors and critical feedback so screen readers announce them immediately.
- Use aria-live="polite" for success or info toasts that do not require urgent action.
- Include a visible icon alongside color so meaning is not conveyed by color alone.
- Provide accessible labels for dismiss buttons with aria-label="Close".
- Move focus to the alert when it appears dynamically, then return focus after dismissal.
- Do not auto-dismiss critical alerts without a pause control or clear persistent option.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.