|$ curl https://forge-ai.dev/api/markdown?path=docs/components/toast
$cat docs/toast-notifications.md
updated Recently·16 min read·published
Toast Notifications
Introduction
Toast notifications are ephemeral, non-blocking messages that appear temporarily to confirm actions, report errors, or surface important updates. This guide covers production-ready toast patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including semantic variants, dismissible states, actions, positioning, stacking, progress indicators, and accessibility.
ℹ
info
Keep toast messages concise. Use a title + one-line description, and ensure critical errors persist until the user dismisses them.
Toast Variants
Four semantic toast types with matching inline SVG icons and accent colors for different notification contexts.
toast-variants
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast success"> |
| 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 class="content"> |
| 8 | <strong> |
| 9 | Success |
| 10 | </strong> |
| 11 | <p> |
| 12 | Your changes have been saved successfully. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="toast error"> |
| 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 class="content"> |
| 23 | <strong> |
| 24 | Error |
| 25 | </strong> |
| 26 | <p> |
| 27 | Failed to connect. Please try again. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="toast warning"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div class="content"> |
| 38 | <strong> |
| 39 | Warning |
| 40 | </strong> |
| 41 | <p> |
| 42 | Your session will expire in 5 minutes. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | <div class="toast info"> |
| 47 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 48 | <circle cx="12" cy="12" r="10"/> |
| 49 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 50 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 51 | </svg> |
| 52 | <div class="content"> |
| 53 | <strong> |
| 54 | Info |
| 55 | </strong> |
| 56 | <p> |
| 57 | A new software update is available. |
| 58 | </p> |
| 59 | </div> |
| 60 | </div> |
| 61 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:380px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | animation:slideIn .3s ease; |
| 26 | font-size:12px; |
| 27 | line-height:1.4 |
| 28 | } |
| 29 | .toast svg { |
| 30 | flex-shrink:0; |
| 31 | margin-top:1px |
| 32 | } |
| 33 | .content strong { |
| 34 | display:block; |
| 35 | margin-bottom:2px; |
| 36 | font-size:12px |
| 37 | } |
| 38 | .content p { |
| 39 | margin:0; |
| 40 | opacity:.8; |
| 41 | font-size:11px |
| 42 | } |
| 43 | .success { |
| 44 | background:#0A1A0A; |
| 45 | border:1px solid rgba(34, |
| 46 | 197, |
| 47 | 94, |
| 48 | .25); |
| 49 | color:#22C55E |
| 50 | } |
| 51 | .error { |
| 52 | background:#1A0A0A; |
| 53 | border:1px solid rgba(239, |
| 54 | 68, |
| 55 | 68, |
| 56 | .25); |
| 57 | color:#EF4444 |
| 58 | } |
| 59 | .warning { |
| 60 | background:#1A1505; |
| 61 | border:1px solid rgba(234, |
| 62 | 179, |
| 63 | 8, |
| 64 | .25); |
| 65 | color:#EAB308 |
| 66 | } |
| 67 | .info { |
| 68 | background:#0A0F1A; |
| 69 | border:1px solid rgba(59, |
| 70 | 130, |
| 71 | 246, |
| 72 | .25); |
| 73 | color:#3B82F6 |
| 74 | } |
| 75 | @keyframes slideIn { |
| 76 | from { |
| 77 | opacity:0; |
| 78 | transform:translateX(20px) |
| 79 | } |
| 80 | to { |
| 81 | opacity:1; |
| 82 | transform:translateX(0) |
| 83 | } |
| 84 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 animate-[slideIn_0.3s_ease]"> |
| 3 | <svg class="w-4 h-4 mt-0.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> |
| 8 | <strong class="block mb-0.5 text-xs"> |
| 9 | Success |
| 10 | </strong> |
| 11 | <p class="opacity-80 text-[11px]"> |
| 12 | Your changes have been saved successfully. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A0A0A] border border-red-500/25 text-red-500 animate-[slideIn_0.3s_ease]"> |
| 17 | <svg class="w-4 h-4 mt-0.5 shrink-0" 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 mb-0.5 text-xs"> |
| 24 | Error |
| 25 | </strong> |
| 26 | <p class="opacity-80 text-[11px]"> |
| 27 | Failed to connect. Please try again. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A1505] border border-yellow-500/25 text-yellow-500 animate-[slideIn_0.3s_ease]"> |
| 32 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div> |
| 38 | <strong class="block mb-0.5 text-xs"> |
| 39 | Warning |
| 40 | </strong> |
| 41 | <p class="opacity-80 text-[11px]"> |
| 42 | Your session will expire in 5 minutes. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[slideIn_0.3s_ease]"> |
| 47 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 48 | <circle cx="12" cy="12" r="10"/> |
| 49 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 50 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 51 | </svg> |
| 52 | <div> |
| 53 | <strong class="block mb-0.5 text-xs"> |
| 54 | Info |
| 55 | </strong> |
| 56 | <p class="opacity-80 text-[11px]"> |
| 57 | A new software update is available. |
| 58 | </p> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:380px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 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="d-block" style="font-size:12px"> |
| 9 | Success |
| 10 | </strong> |
| 11 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 12 | Your changes have been saved successfully. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="alert alert-danger d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#1A0A0A;color:#EF4444;border:1px solid rgba(239,68,68,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 17 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 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="d-block" style="font-size:12px"> |
| 24 | Error |
| 25 | </strong> |
| 26 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 27 | Failed to connect. Please try again. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="alert alert-warning d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#1A1505;color:#EAB308;border:1px solid rgba(234,179,8,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div> |
| 38 | <strong class="d-block" style="font-size:12px"> |
| 39 | Warning |
| 40 | </strong> |
| 41 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 42 | Your session will expire in 5 minutes. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | <div class="alert alert-primary d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 47 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 48 | <circle cx="12" cy="12" r="10"/> |
| 49 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 50 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 51 | </svg> |
| 52 | <div> |
| 53 | <strong class="d-block" style="font-size:12px"> |
| 54 | Info |
| 55 | </strong> |
| 56 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 57 | A new software update is available. |
| 58 | </p> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
ℹ
info
Use toasts for brief, non-blocking notifications. They should auto-dismiss after 3-5 seconds for success messages, but persist for errors until the user dismisses them.
Dismissible
Toasts with a close button for manual dismissal — essential for error messages users need to read.
toast-dismiss
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast success dismissible"> |
| 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 class="content"> |
| 8 | <strong> |
| 9 | File uploaded |
| 10 | </strong> |
| 11 | <p> |
| 12 | report-2024.pdf has been uploaded. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button class="close" aria-label="Dismiss"> |
| 16 | × |
| 17 | </button> |
| 18 | </div> |
| 19 | <div class="toast error dismissible"> |
| 20 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <circle cx="12" cy="12" r="10"/> |
| 22 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 23 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 24 | </svg> |
| 25 | <div class="content"> |
| 26 | <strong> |
| 27 | Upload failed |
| 28 | </strong> |
| 29 | <p> |
| 30 | File exceeds 10MB limit. |
| 31 | </p> |
| 32 | </div> |
| 33 | <button class="close" aria-label="Dismiss"> |
| 34 | × |
| 35 | </button> |
| 36 | </div> |
| 37 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:380px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | animation:slideIn .3s ease; |
| 28 | transition:all .3s ease |
| 29 | } |
| 30 | .toast svg { |
| 31 | flex-shrink:0; |
| 32 | margin-top:1px |
| 33 | } |
| 34 | .content { |
| 35 | flex:1 |
| 36 | } |
| 37 | .content strong { |
| 38 | display:block; |
| 39 | margin-bottom:2px; |
| 40 | font-size:12px |
| 41 | } |
| 42 | .content p { |
| 43 | margin:0; |
| 44 | opacity:.8; |
| 45 | font-size:11px |
| 46 | } |
| 47 | .close { |
| 48 | background:none; |
| 49 | border:none; |
| 50 | color:inherit; |
| 51 | font-size:20px; |
| 52 | cursor:pointer; |
| 53 | opacity:.4; |
| 54 | padding:0; |
| 55 | line-height:1; |
| 56 | flex-shrink:0; |
| 57 | margin-top:-2px |
| 58 | } |
| 59 | .close:hover { |
| 60 | opacity:1 |
| 61 | } |
| 62 | .success { |
| 63 | background:#0A1A0A; |
| 64 | border:1px solid rgba(34, |
| 65 | 197, |
| 66 | 94, |
| 67 | .25); |
| 68 | color:#22C55E |
| 69 | } |
| 70 | .error { |
| 71 | background:#1A0A0A; |
| 72 | border:1px solid rgba(239, |
| 73 | 68, |
| 74 | 68, |
| 75 | .25); |
| 76 | color:#EF4444 |
| 77 | } |
| 78 | @keyframes slideIn { |
| 79 | from { |
| 80 | opacity:0; |
| 81 | transform:translateX(20px) |
| 82 | } |
| 83 | to { |
| 84 | opacity:1; |
| 85 | transform:translateX(0) |
| 86 | } |
| 87 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.toast .close').forEach(btn=>{btn.addEventListener('click',()=>{const t=btn.closest('.toast');t.style.opacity='0';t.style.transform='translateX(30px)';t.style.maxHeight=t.offsetHeight+'px';setTimeout(()=>{t.style.maxHeight='0';t.style.padding='0 16px';t.style.margin='0';t.style.border='none'},150);setTimeout(()=>t.remove(),400)})}) |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="toast flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 transition-all duration-300 animate-[slideIn_0.3s_ease]"> |
| 3 | <svg class="w-4 h-4 mt-0.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 mb-0.5 text-xs"> |
| 9 | File uploaded |
| 10 | </strong> |
| 11 | <p class="opacity-80 text-[11px]"> |
| 12 | report-2024.pdf has been uploaded. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button aria-label="Dismiss" class="toast-close -mt-0.5 text-[20px] leading-none opacity-40 hover:opacity-100 bg-transparent border-0 p-0 cursor-pointer text-inherit"> |
| 16 | × |
| 17 | </button> |
| 18 | </div> |
| 19 | <div class="toast flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A0A0A] border border-red-500/25 text-red-500 transition-all duration-300 animate-[slideIn_0.3s_ease]"> |
| 20 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <circle cx="12" cy="12" r="10"/> |
| 22 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 23 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 24 | </svg> |
| 25 | <div class="flex-1"> |
| 26 | <strong class="block mb-0.5 text-xs"> |
| 27 | Upload failed |
| 28 | </strong> |
| 29 | <p class="opacity-80 text-[11px]"> |
| 30 | File exceeds 10MB limit. |
| 31 | </p> |
| 32 | </div> |
| 33 | <button aria-label="Dismiss" class="toast-close -mt-0.5 text-[20px] leading-none opacity-40 hover:opacity-100 bg-transparent border-0 p-0 cursor-pointer text-inherit"> |
| 34 | × |
| 35 | </button> |
| 36 | </div> |
| 37 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:380px"> |
| 2 | <div class="toast align-items-start gap-2 p-3 border-0" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;animation:slideIn .3s ease" role="alert" aria-live="assertive" aria-atomic="true"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 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 | <strong class="d-block" style="font-size:12px"> |
| 9 | File uploaded |
| 10 | </strong> |
| 11 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 12 | report-2024.pdf has been uploaded. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button type="button" class="btn-close btn-close-white" style="filter:grayscale(100%) brightness(1.8)" aria-label="Close"> |
| 16 | </button> |
| 17 | </div> |
| 18 | <div class="toast align-items-start gap-2 p-3 border-0" style="background:#1A0A0A;color:#EF4444;border:1px solid rgba(239,68,68,.25)!important;animation:slideIn .3s ease" role="alert" aria-live="assertive" aria-atomic="true"> |
| 19 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 20 | <circle cx="12" cy="12" r="10"/> |
| 21 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 22 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 23 | </svg> |
| 24 | <div class="flex-grow-1"> |
| 25 | <strong class="d-block" style="font-size:12px"> |
| 26 | Upload failed |
| 27 | </strong> |
| 28 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 29 | File exceeds 10MB limit. |
| 30 | </p> |
| 31 | </div> |
| 32 | <button type="button" class="btn-close btn-close-white" style="filter:grayscale(100%) brightness(1.8)" aria-label="Close"> |
| 33 | </button> |
| 34 | </div> |
| 35 | </div> |
With Action Buttons
Toasts with action buttons for undo, retry, or navigation — gives users a clear next step.
toast-action
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast success"> |
| 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 class="content"> |
| 8 | <strong> |
| 9 | Message sent |
| 10 | </strong> |
| 11 | <p> |
| 12 | Your email has been delivered. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button class="toast-btn"> |
| 16 | Undo |
| 17 | </button> |
| 18 | </div> |
| 19 | <div class="toast error"> |
| 20 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <circle cx="12" cy="12" r="10"/> |
| 22 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 23 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 24 | </svg> |
| 25 | <div class="content"> |
| 26 | <strong> |
| 27 | Sync failed |
| 28 | </strong> |
| 29 | <p> |
| 30 | Could not sync your data. |
| 31 | </p> |
| 32 | </div> |
| 33 | <button class="toast-btn"> |
| 34 | Retry |
| 35 | </button> |
| 36 | </div> |
| 37 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:400px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | animation:slideIn .3s ease |
| 28 | } |
| 29 | .toast svg { |
| 30 | flex-shrink:0; |
| 31 | margin-top:1px |
| 32 | } |
| 33 | .content { |
| 34 | flex:1 |
| 35 | } |
| 36 | .content strong { |
| 37 | display:block; |
| 38 | margin-bottom:2px; |
| 39 | font-size:12px |
| 40 | } |
| 41 | .content p { |
| 42 | margin:0; |
| 43 | opacity:.8; |
| 44 | font-size:11px |
| 45 | } |
| 46 | .toast-btn { |
| 47 | padding:6px 14px; |
| 48 | border-radius:6px; |
| 49 | font-size:11px; |
| 50 | font-weight:600; |
| 51 | cursor:pointer; |
| 52 | border:1.5px solid currentColor; |
| 53 | background:transparent; |
| 54 | color:inherit; |
| 55 | white-space:nowrap; |
| 56 | flex-shrink:0; |
| 57 | transition:all .2s |
| 58 | } |
| 59 | .toast-btn:hover { |
| 60 | background:rgba(255, |
| 61 | 255, |
| 62 | 255, |
| 63 | .08) |
| 64 | } |
| 65 | .success { |
| 66 | background:#0A1A0A; |
| 67 | border:1px solid rgba(34, |
| 68 | 197, |
| 69 | 94, |
| 70 | .25); |
| 71 | color:#22C55E |
| 72 | } |
| 73 | .error { |
| 74 | background:#1A0A0A; |
| 75 | border:1px solid rgba(239, |
| 76 | 68, |
| 77 | 68, |
| 78 | .25); |
| 79 | color:#EF4444 |
| 80 | } |
| 81 | @keyframes slideIn { |
| 82 | from { |
| 83 | opacity:0; |
| 84 | transform:translateX(20px) |
| 85 | } |
| 86 | to { |
| 87 | opacity:1; |
| 88 | transform:translateX(0) |
| 89 | } |
| 90 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-md mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 animate-[slideIn_0.3s_ease]"> |
| 3 | <svg class="w-4 h-4 mt-0.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 mb-0.5 text-xs"> |
| 9 | Message sent |
| 10 | </strong> |
| 11 | <p class="opacity-80 text-[11px]"> |
| 12 | Your email has been delivered. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border-[1.5px] border-current bg-transparent text-inherit shrink-0 hover:bg-white/[0.08] transition-all"> |
| 16 | Undo |
| 17 | </button> |
| 18 | </div> |
| 19 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A0A0A] border border-red-500/25 text-red-500 animate-[slideIn_0.3s_ease]"> |
| 20 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <circle cx="12" cy="12" r="10"/> |
| 22 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 23 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 24 | </svg> |
| 25 | <div class="flex-1"> |
| 26 | <strong class="block mb-0.5 text-xs"> |
| 27 | Sync failed |
| 28 | </strong> |
| 29 | <p class="opacity-80 text-[11px]"> |
| 30 | Could not sync your data. |
| 31 | </p> |
| 32 | </div> |
| 33 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border-[1.5px] border-current bg-transparent text-inherit shrink-0 hover:bg-white/[0.08] transition-all"> |
| 34 | Retry |
| 35 | </button> |
| 36 | </div> |
| 37 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:400px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 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 | <strong class="d-block" style="font-size:12px"> |
| 9 | Message sent |
| 10 | </strong> |
| 11 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 12 | Your email has been delivered. |
| 13 | </p> |
| 14 | </div> |
| 15 | <button class="btn btn-sm fw-semibold" style="background:transparent;border:1.5px solid currentColor;color:inherit;font-size:11px"> |
| 16 | Undo |
| 17 | </button> |
| 18 | </div> |
| 19 | <div class="alert alert-danger d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#1A0A0A;color:#EF4444;border:1px solid rgba(239,68,68,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 20 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 21 | <circle cx="12" cy="12" r="10"/> |
| 22 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 23 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 24 | </svg> |
| 25 | <div class="flex-grow-1"> |
| 26 | <strong class="d-block" style="font-size:12px"> |
| 27 | Sync failed |
| 28 | </strong> |
| 29 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 30 | Could not sync your data. |
| 31 | </p> |
| 32 | </div> |
| 33 | <button class="btn btn-sm fw-semibold" style="background:transparent;border:1.5px solid currentColor;color:inherit;font-size:11px"> |
| 34 | Retry |
| 35 | </button> |
| 36 | </div> |
| 37 | </div> |
✓
best practice
Action buttons in toasts should use outline or ghost styling to avoid competing visually with the main content area. Keep the button text short — "Undo", "Retry", "View" — not full sentences.
Positions
Toast placement in different corners and edges — choose the position that least disrupts the user flow.
toast-positions
Live
untitled.html
HTML
| 1 | <div class="grid"> |
| 2 | <div class="pos top-left"> |
| 3 | <div class="toast info mini"> |
| 4 | Top Left |
| 5 | </div> |
| 6 | </div> |
| 7 | <div class="pos top-right"> |
| 8 | <div class="toast info mini"> |
| 9 | Top Right |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="pos bottom-left"> |
| 13 | <div class="toast info mini"> |
| 14 | Bottom Left |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="pos bottom-right"> |
| 18 | <div class="toast info mini"> |
| 19 | Bottom Right |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="pos top-center"> |
| 23 | <div class="toast info mini"> |
| 24 | Top Center |
| 25 | </div> |
| 26 | </div> |
| 27 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .grid { |
| 13 | position:relative; |
| 14 | width:100%; |
| 15 | height:260px; |
| 16 | border:1px dashed #2A2A3E; |
| 17 | border-radius:8px; |
| 18 | margin:16px auto |
| 19 | } |
| 20 | .pos { |
| 21 | position:absolute |
| 22 | } |
| 23 | .pos.top-left { |
| 24 | top:12px; |
| 25 | left:12px |
| 26 | } |
| 27 | .pos.top-right { |
| 28 | top:12px; |
| 29 | right:12px |
| 30 | } |
| 31 | .pos.bottom-left { |
| 32 | bottom:12px; |
| 33 | left:12px |
| 34 | } |
| 35 | .pos.bottom-right { |
| 36 | bottom:12px; |
| 37 | right:12px |
| 38 | } |
| 39 | .pos.top-center { |
| 40 | top:12px; |
| 41 | left:50%; |
| 42 | transform:translateX(-50%) |
| 43 | } |
| 44 | .toast { |
| 45 | padding:10px 16px; |
| 46 | border-radius:8px; |
| 47 | font-size:11px; |
| 48 | font-weight:600; |
| 49 | animation:fadeIn .3s ease; |
| 50 | white-space:nowrap |
| 51 | } |
| 52 | .toast.mini { |
| 53 | background:#0A0F1A; |
| 54 | border:1px solid rgba(59, |
| 55 | 130, |
| 56 | 246, |
| 57 | .25); |
| 58 | color:#3B82F6 |
| 59 | } |
| 60 | @keyframes fadeIn { |
| 61 | from { |
| 62 | opacity:0; |
| 63 | transform:translateY(-8px) |
| 64 | } |
| 65 | to { |
| 66 | opacity:1; |
| 67 | transform:translateY(0) |
| 68 | } |
| 69 | } |
untitled.html
HTML
| 1 | <div class="relative w-full h-[260px] border border-dashed border-[#2A2A3E] rounded-lg mx-auto mt-4 bg-[#0A0A0A]"> |
| 2 | <div class="absolute top-3 left-3"> |
| 3 | <div class="px-4 py-2.5 rounded-lg text-[11px] font-semibold whitespace-nowrap bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[fadeIn_0.3s_ease]"> |
| 4 | Top Left |
| 5 | </div> |
| 6 | </div> |
| 7 | <div class="absolute top-3 right-3"> |
| 8 | <div class="px-4 py-2.5 rounded-lg text-[11px] font-semibold whitespace-nowrap bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[fadeIn_0.3s_ease]"> |
| 9 | Top Right |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="absolute bottom-3 left-3"> |
| 13 | <div class="px-4 py-2.5 rounded-lg text-[11px] font-semibold whitespace-nowrap bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[fadeIn_0.3s_ease]"> |
| 14 | Bottom Left |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="absolute bottom-3 right-3"> |
| 18 | <div class="px-4 py-2.5 rounded-lg text-[11px] font-semibold whitespace-nowrap bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[fadeIn_0.3s_ease]"> |
| 19 | Bottom Right |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="absolute top-3 left-1/2 -translate-x-1/2"> |
| 23 | <div class="px-4 py-2.5 rounded-lg text-[11px] font-semibold whitespace-nowrap bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[fadeIn_0.3s_ease]"> |
| 24 | Top Center |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
untitled.html
HTML
| 1 | <div class="position-relative w-100 bg-[#0A0A0A]" style="height:260px;border:1px dashed #2A2A3E;border-radius:8px"> |
| 2 | <div class="position-absolute" style="top:12px;left:12px"> |
| 3 | <div class="alert alert-primary border-0 py-2 px-3 mb-0 fw-semibold" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;font-size:11px;white-space:nowrap;animation:fadeIn .3s ease"> |
| 4 | Top Left |
| 5 | </div> |
| 6 | </div> |
| 7 | <div class="position-absolute" style="top:12px;right:12px"> |
| 8 | <div class="alert alert-primary border-0 py-2 px-3 mb-0 fw-semibold" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;font-size:11px;white-space:nowrap;animation:fadeIn .3s ease"> |
| 9 | Top Right |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="position-absolute" style="bottom:12px;left:12px"> |
| 13 | <div class="alert alert-primary border-0 py-2 px-3 mb-0 fw-semibold" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;font-size:11px;white-space:nowrap;animation:fadeIn .3s ease"> |
| 14 | Bottom Left |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="position-absolute" style="bottom:12px;right:12px"> |
| 18 | <div class="alert alert-primary border-0 py-2 px-3 mb-0 fw-semibold" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;font-size:11px;white-space:nowrap;animation:fadeIn .3s ease"> |
| 19 | Bottom Right |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="position-absolute start-50 translate-middle-x" style="top:12px"> |
| 23 | <div class="alert alert-primary border-0 py-2 px-3 mb-0 fw-semibold" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;font-size:11px;white-space:nowrap;animation:fadeIn .3s ease"> |
| 24 | Top Center |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
⚠
warning
Position toasts away from primary navigation areas. Bottom-right is the most common default. Avoid top-center for long messages as it can overlap with the browser toolbar on mobile.
Stacking
Multiple toasts stacking vertically with spacing — newer toasts push older ones up.
toast-stack
Live
untitled.html
HTML
| 1 | <div class="stack-area"> |
| 2 | <div class="toast success"> |
| 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 class="content"> |
| 8 | <strong> |
| 9 | Saved |
| 10 | </strong> |
| 11 | <p> |
| 12 | Profile updated. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="toast info"> |
| 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="12" y1="16" x2="12" y2="12"/> |
| 20 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 21 | </svg> |
| 22 | <div class="content"> |
| 23 | <strong> |
| 24 | New message |
| 25 | </strong> |
| 26 | <p> |
| 27 | You have 3 unread messages. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="toast warning"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div class="content"> |
| 38 | <strong> |
| 39 | Storage low |
| 40 | </strong> |
| 41 | <p> |
| 42 | Only 2GB remaining. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .stack-area { |
| 13 | max-width:360px; |
| 14 | margin:0 auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:10px |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | animation:stackIn .3s ease; |
| 28 | box-shadow:0 8px 24px rgba(0, |
| 29 | 0, |
| 30 | 0, |
| 31 | .4) |
| 32 | } |
| 33 | .toast svg { |
| 34 | flex-shrink:0; |
| 35 | margin-top:1px |
| 36 | } |
| 37 | .content strong { |
| 38 | display:block; |
| 39 | margin-bottom:2px; |
| 40 | font-size:12px |
| 41 | } |
| 42 | .content p { |
| 43 | margin:0; |
| 44 | opacity:.8; |
| 45 | font-size:11px |
| 46 | } |
| 47 | .success { |
| 48 | background:#0A1A0A; |
| 49 | border:1px solid rgba(34, |
| 50 | 197, |
| 51 | 94, |
| 52 | .25); |
| 53 | color:#22C55E |
| 54 | } |
| 55 | .info { |
| 56 | background:#0A0F1A; |
| 57 | border:1px solid rgba(59, |
| 58 | 130, |
| 59 | 246, |
| 60 | .25); |
| 61 | color:#3B82F6 |
| 62 | } |
| 63 | .warning { |
| 64 | background:#1A1505; |
| 65 | border:1px solid rgba(234, |
| 66 | 179, |
| 67 | 8, |
| 68 | .25); |
| 69 | color:#EAB308 |
| 70 | } |
| 71 | @keyframes stackIn { |
| 72 | from { |
| 73 | opacity:0; |
| 74 | transform:translateY(-12px) scale(.96) |
| 75 | } |
| 76 | to { |
| 77 | opacity:1; |
| 78 | transform:translateY(0) scale(1) |
| 79 | } |
| 80 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 shadow-[0_8px_24px_rgba(0,0,0,0.4)] animate-[stackIn_0.3s_ease]"> |
| 3 | <svg class="w-4 h-4 mt-0.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> |
| 8 | <strong class="block mb-0.5 text-xs"> |
| 9 | Saved |
| 10 | </strong> |
| 11 | <p class="opacity-80 text-[11px]"> |
| 12 | Profile updated. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A0F1A] border border-blue-500/25 text-blue-500 shadow-[0_8px_24px_rgba(0,0,0,0.4)] animate-[stackIn_0.3s_ease]"> |
| 17 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="10"/> |
| 19 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 20 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 21 | </svg> |
| 22 | <div> |
| 23 | <strong class="block mb-0.5 text-xs"> |
| 24 | New message |
| 25 | </strong> |
| 26 | <p class="opacity-80 text-[11px]"> |
| 27 | You have 3 unread messages. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A1505] border border-yellow-500/25 text-yellow-500 shadow-[0_8px_24px_rgba(0,0,0,0.4)] animate-[stackIn_0.3s_ease]"> |
| 32 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div> |
| 38 | <strong class="block mb-0.5 text-xs"> |
| 39 | Storage low |
| 40 | </strong> |
| 41 | <p class="opacity-80 text-[11px]"> |
| 42 | Only 2GB remaining. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:360px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:stackIn .3s ease" role="alert"> |
| 3 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 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="d-block" style="font-size:12px"> |
| 9 | Saved |
| 10 | </strong> |
| 11 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 12 | Profile updated. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="alert alert-primary d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:stackIn .3s ease" role="alert"> |
| 17 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 18 | <circle cx="12" cy="12" r="10"/> |
| 19 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 20 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 21 | </svg> |
| 22 | <div> |
| 23 | <strong class="d-block" style="font-size:12px"> |
| 24 | New message |
| 25 | </strong> |
| 26 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 27 | You have 3 unread messages. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="alert alert-warning d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#1A1505;color:#EAB308;border:1px solid rgba(234,179,8,.25)!important;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:stackIn .3s ease" role="alert"> |
| 32 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 33 | <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"/> |
| 34 | <line x1="12" y1="9" x2="12" y2="13"/> |
| 35 | <line x1="12" y1="17" x2="12.01" y2="17"/> |
| 36 | </svg> |
| 37 | <div> |
| 38 | <strong class="d-block" style="font-size:12px"> |
| 39 | Storage low |
| 40 | </strong> |
| 41 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 42 | Only 2GB remaining. |
| 43 | </p> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
With Progress Bar
Toasts with a progress bar showing remaining time before auto-dismiss — gives users a visual countdown.
toast-progress
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast success with-progress"> |
| 3 | <div class="progress-track"> |
| 4 | <div class="progress-fill" style="width:80%"> |
| 5 | </div> |
| 6 | </div> |
| 7 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 8 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 9 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 10 | </svg> |
| 11 | <div class="content"> |
| 12 | <strong> |
| 13 | Processing |
| 14 | </strong> |
| 15 | <p> |
| 16 | Your request is being processed... |
| 17 | </p> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="toast error with-progress"> |
| 21 | <div class="progress-track"> |
| 22 | <div class="progress-fill err" style="width:45%"> |
| 23 | </div> |
| 24 | </div> |
| 25 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <circle cx="12" cy="12" r="10"/> |
| 27 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 28 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 29 | </svg> |
| 30 | <div class="content"> |
| 31 | <strong> |
| 32 | Error |
| 33 | </strong> |
| 34 | <p> |
| 35 | This toast persists until dismissed. |
| 36 | </p> |
| 37 | </div> |
| 38 | </div> |
| 39 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:380px; |
| 14 | margin:0 auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:12px |
| 18 | } |
| 19 | .toast { |
| 20 | position:relative; |
| 21 | padding:14px 16px; |
| 22 | border-radius:10px; |
| 23 | font-size:12px; |
| 24 | line-height:1.4; |
| 25 | overflow:hidden; |
| 26 | animation:slideIn .3s ease; |
| 27 | display:flex; |
| 28 | align-items:flex-start; |
| 29 | gap:10px |
| 30 | } |
| 31 | .progress-track { |
| 32 | position:absolute; |
| 33 | top:0; |
| 34 | left:0; |
| 35 | right:0; |
| 36 | height:3px; |
| 37 | background:rgba(255, |
| 38 | 255, |
| 39 | 255, |
| 40 | .05) |
| 41 | } |
| 42 | .progress-fill { |
| 43 | height:100%; |
| 44 | border-radius:0 2px 2px 0; |
| 45 | transition:width 1s linear; |
| 46 | background:#22C55E |
| 47 | } |
| 48 | .progress-fill.err { |
| 49 | background:#EF4444 |
| 50 | } |
| 51 | .toast svg { |
| 52 | flex-shrink:0; |
| 53 | margin-top:1px |
| 54 | } |
| 55 | .content strong { |
| 56 | display:block; |
| 57 | margin-bottom:2px; |
| 58 | font-size:12px |
| 59 | } |
| 60 | .content p { |
| 61 | margin:0; |
| 62 | opacity:.8; |
| 63 | font-size:11px |
| 64 | } |
| 65 | .success { |
| 66 | background:#0A1A0A; |
| 67 | border:1px solid rgba(34, |
| 68 | 197, |
| 69 | 94, |
| 70 | .25); |
| 71 | color:#22C55E |
| 72 | } |
| 73 | .error { |
| 74 | background:#1A0A0A; |
| 75 | border:1px solid rgba(239, |
| 76 | 68, |
| 77 | 68, |
| 78 | .25); |
| 79 | color:#EF4444 |
| 80 | } |
| 81 | @keyframes slideIn { |
| 82 | from { |
| 83 | opacity:0; |
| 84 | transform:translateX(20px) |
| 85 | } |
| 86 | to { |
| 87 | opacity:1; |
| 88 | transform:translateX(0) |
| 89 | } |
| 90 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-3 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="relative flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 overflow-hidden animate-[slideIn_0.3s_ease]"> |
| 3 | <div class="absolute top-0 left-0 right-0 h-[3px] bg-white/5"> |
| 4 | <div class="h-full rounded-r bg-green-500 transition-all duration-1000" style="width:80%"> |
| 5 | </div> |
| 6 | </div> |
| 7 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 8 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 9 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 10 | </svg> |
| 11 | <div> |
| 12 | <strong class="block mb-0.5 text-xs"> |
| 13 | Processing |
| 14 | </strong> |
| 15 | <p class="opacity-80 text-[11px]"> |
| 16 | Your request is being processed... |
| 17 | </p> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="relative flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A0A0A] border border-red-500/25 text-red-500 overflow-hidden animate-[slideIn_0.3s_ease]"> |
| 21 | <div class="absolute top-0 left-0 right-0 h-[3px] bg-white/5"> |
| 22 | <div class="h-full rounded-r bg-red-500 transition-all duration-1000" style="width:45%"> |
| 23 | </div> |
| 24 | </div> |
| 25 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <circle cx="12" cy="12" r="10"/> |
| 27 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 28 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 29 | </svg> |
| 30 | <div> |
| 31 | <strong class="block mb-0.5 text-xs"> |
| 32 | Error |
| 33 | </strong> |
| 34 | <p class="opacity-80 text-[11px]"> |
| 35 | This toast persists until dismissed. |
| 36 | </p> |
| 37 | </div> |
| 38 | </div> |
| 39 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 mx-auto" style="max-width:380px"> |
| 2 | <div class="alert alert-success d-flex align-items-start gap-2 p-3 border-0 mb-0 overflow-hidden" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 3 | <div style="position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.05)"> |
| 4 | <div style="height:100%;border-radius:0 2px 2px 0;background:#22C55E;width:80%"> |
| 5 | </div> |
| 6 | </div> |
| 7 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 8 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 9 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 10 | </svg> |
| 11 | <div> |
| 12 | <strong class="d-block" style="font-size:12px"> |
| 13 | Processing |
| 14 | </strong> |
| 15 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 16 | Your request is being processed... |
| 17 | </p> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="alert alert-danger d-flex align-items-start gap-2 p-3 border-0 mb-0 overflow-hidden" style="background:#1A0A0A;color:#EF4444;border:1px solid rgba(239,68,68,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 21 | <div style="position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.05)"> |
| 22 | <div style="height:100%;border-radius:0 2px 2px 0;background:#EF4444;width:45%"> |
| 23 | </div> |
| 24 | </div> |
| 25 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 26 | <circle cx="12" cy="12" r="10"/> |
| 27 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 28 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 29 | </svg> |
| 30 | <div> |
| 31 | <strong class="d-block" style="font-size:12px"> |
| 32 | Error |
| 33 | </strong> |
| 34 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 35 | This toast persists until dismissed. |
| 36 | </p> |
| 37 | </div> |
| 38 | </div> |
| 39 | </div> |
🔥
pro tip
A shrinking progress bar at the top of the toast visually communicates how long it will stay visible. Animate the width from 100% to 0% over the auto-dismiss duration. For persistent toasts (errors), omit the progress bar entirely.
Rich Toast
Toasts with avatars, images, and complex layouts for richer notification content.
toast-rich
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast rich"> |
| 3 | <div class="t-avatar" style="background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="content"> |
| 7 | <strong> |
| 8 | Jane commented on your post |
| 9 | </strong> |
| 10 | <p> |
| 11 | "Great article! The section on caching was really helpful." |
| 12 | </p> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="toast rich"> |
| 16 | <div class="t-avatar" style="background:#A855F7"> |
| 17 | AB |
| 18 | </div> |
| 19 | <div class="content"> |
| 20 | <strong> |
| 21 | Alex shared a file |
| 22 | </strong> |
| 23 | <p> |
| 24 | design-system-v2.fig |
| 25 | </p> |
| 26 | </div> |
| 27 | <button class="toast-btn"> |
| 28 | View |
| 29 | </button> |
| 30 | </div> |
| 31 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:380px; |
| 14 | margin:0 auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:10px |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | background:#0A0A0F; |
| 28 | border:1px solid #1A1A2E; |
| 29 | color:#E0E0E0; |
| 30 | animation:slideIn .3s ease |
| 31 | } |
| 32 | .t-avatar { |
| 33 | width:36px; |
| 34 | height:36px; |
| 35 | border-radius:50%; |
| 36 | display:flex; |
| 37 | align-items:center; |
| 38 | justify-content:center; |
| 39 | font-size:13px; |
| 40 | font-weight:700; |
| 41 | color:#fff; |
| 42 | flex-shrink:0 |
| 43 | } |
| 44 | .content { |
| 45 | flex:1 |
| 46 | } |
| 47 | .content strong { |
| 48 | display:block; |
| 49 | margin-bottom:2px; |
| 50 | font-size:12px |
| 51 | } |
| 52 | .content p { |
| 53 | margin:0; |
| 54 | opacity:.6; |
| 55 | font-size:11px; |
| 56 | line-height:1.4 |
| 57 | } |
| 58 | .toast-btn { |
| 59 | padding:6px 14px; |
| 60 | border-radius:6px; |
| 61 | font-size:11px; |
| 62 | font-weight:600; |
| 63 | cursor:pointer; |
| 64 | border:1px solid #2A2A3E; |
| 65 | background:transparent; |
| 66 | color:#A0A0A0; |
| 67 | flex-shrink:0; |
| 68 | transition:all .2s |
| 69 | } |
| 70 | .toast-btn:hover { |
| 71 | border-color:#3B82F6; |
| 72 | color:#3B82F6 |
| 73 | } |
| 74 | @keyframes slideIn { |
| 75 | from { |
| 76 | opacity:0; |
| 77 | transform:translateX(20px) |
| 78 | } |
| 79 | to { |
| 80 | opacity:1; |
| 81 | transform:translateX(0) |
| 82 | } |
| 83 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A0A0F] border border-[#1A1A2E] text-[#E0E0E0] animate-[slideIn_0.3s_ease]"> |
| 3 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-bold text-white shrink-0" style="background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="flex-1"> |
| 7 | <strong class="block mb-0.5 text-xs"> |
| 8 | Jane commented on your post |
| 9 | </strong> |
| 10 | <p class="opacity-60 text-[11px] leading-relaxed"> |
| 11 | "Great article! The section on caching was really helpful." |
| 12 | </p> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A0A0F] border border-[#1A1A2E] text-[#E0E0E0] animate-[slideIn_0.3s_ease]"> |
| 16 | <div class="w-9 h-9 rounded-full flex items-center justify-center text-[13px] font-bold text-white shrink-0" style="background:#A855F7"> |
| 17 | AB |
| 18 | </div> |
| 19 | <div class="flex-1"> |
| 20 | <strong class="block mb-0.5 text-xs"> |
| 21 | Alex shared a file |
| 22 | </strong> |
| 23 | <p class="opacity-60 text-[11px] leading-relaxed"> |
| 24 | design-system-v2.fig |
| 25 | </p> |
| 26 | </div> |
| 27 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border border-[#2A2A3E] bg-transparent text-[#A0A0A0] shrink-0 hover:border-blue-500 hover:text-blue-500 transition-all"> |
| 28 | View |
| 29 | </button> |
| 30 | </div> |
| 31 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:380px"> |
| 2 | <div class="alert d-flex align-items-start gap-2 p-3 border mb-0" style="background:#0A0A0F;color:#E0E0E0;border-color:#1A1A2E!important;animation:slideIn .3s ease" role="alert"> |
| 3 | <div class="flex-shrink-0 rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:36px;height:36px;background:#3B82F6;font-size:13px"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="flex-grow-1"> |
| 7 | <strong class="d-block" style="font-size:12px"> |
| 8 | Jane commented on your post |
| 9 | </strong> |
| 10 | <p class="mb-0" style="font-size:11px;opacity:.6"> |
| 11 | "Great article! The section on caching was really helpful." |
| 12 | </p> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="alert d-flex align-items-start gap-2 p-3 border mb-0" style="background:#0A0A0F;color:#E0E0E0;border-color:#1A1A2E!important;animation:slideIn .3s ease" role="alert"> |
| 16 | <div class="flex-shrink-0 rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:36px;height:36px;background:#A855F7;font-size:13px"> |
| 17 | AB |
| 18 | </div> |
| 19 | <div class="flex-grow-1"> |
| 20 | <strong class="d-block" style="font-size:12px"> |
| 21 | Alex shared a file |
| 22 | </strong> |
| 23 | <p class="mb-0" style="font-size:11px;opacity:.6"> |
| 24 | design-system-v2.fig |
| 25 | </p> |
| 26 | </div> |
| 27 | <button class="btn btn-sm fw-semibold" style="background:transparent;border:1px solid #2A2A3E;color:#A0A0A0;font-size:11px"> |
| 28 | View |
| 29 | </button> |
| 30 | </div> |
| 31 | </div> |
Minimal Style
Clean, minimal toasts with just an icon, text, and close button — no heavy backgrounds or borders.
toast-minimal
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast mini success"> |
| 3 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <span> |
| 7 | Changes saved |
| 8 | </span> |
| 9 | <button class="close" aria-label="Dismiss"> |
| 10 | × |
| 11 | </button> |
| 12 | </div> |
| 13 | <div class="toast mini error"> |
| 14 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 15 | <line x1="18" y1="6" x2="6" y2="18"/> |
| 16 | <line x1="6" y1="6" x2="18" y2="18"/> |
| 17 | </svg> |
| 18 | <span> |
| 19 | Connection lost |
| 20 | </span> |
| 21 | <button class="close" aria-label="Dismiss"> |
| 22 | × |
| 23 | </button> |
| 24 | </div> |
| 25 | <div class="toast mini info"> |
| 26 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 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 | <span> |
| 32 | Tip: Press Cmd+K to search |
| 33 | </span> |
| 34 | <button class="close" aria-label="Dismiss"> |
| 35 | × |
| 36 | </button> |
| 37 | </div> |
| 38 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | max-width:360px; |
| 14 | margin:0 auto; |
| 15 | display:flex; |
| 16 | flex-direction:column; |
| 17 | gap:8px |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:8px; |
| 23 | padding:10px 14px; |
| 24 | border-radius:8px; |
| 25 | font-size:12px; |
| 26 | animation:slideIn .3s ease; |
| 27 | font-weight:500 |
| 28 | } |
| 29 | .toast svg { |
| 30 | flex-shrink:0 |
| 31 | } |
| 32 | .close { |
| 33 | background:none; |
| 34 | border:none; |
| 35 | color:inherit; |
| 36 | font-size:16px; |
| 37 | cursor:pointer; |
| 38 | opacity:.4; |
| 39 | padding:0; |
| 40 | margin-left:auto; |
| 41 | line-height:1 |
| 42 | } |
| 43 | .close:hover { |
| 44 | opacity:1 |
| 45 | } |
| 46 | .success { |
| 47 | color:#22C55E; |
| 48 | background:rgba(34, |
| 49 | 197, |
| 50 | 94, |
| 51 | .06) |
| 52 | } |
| 53 | .error { |
| 54 | color:#EF4444; |
| 55 | background:rgba(239, |
| 56 | 68, |
| 57 | 68, |
| 58 | .06) |
| 59 | } |
| 60 | .info { |
| 61 | color:#3B82F6; |
| 62 | background:rgba(59, |
| 63 | 130, |
| 64 | 246, |
| 65 | .06) |
| 66 | } |
| 67 | @keyframes slideIn { |
| 68 | from { |
| 69 | opacity:0; |
| 70 | transform:translateX(16px) |
| 71 | } |
| 72 | to { |
| 73 | opacity:1; |
| 74 | transform:translateX(0) |
| 75 | } |
| 76 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.toast .close').forEach(b=>{b.addEventListener('click',()=>{const t=b.closest('.toast');t.style.opacity='0';t.style.transform='translateX(20px)';setTimeout(()=>t.remove(),300)})}) |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="toast-mini flex items-center gap-2 px-3.5 py-2.5 rounded-lg text-xs font-medium text-green-500 bg-green-500/[0.06] animate-[slideIn_0.3s_ease]"> |
| 3 | <svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <span> |
| 7 | Changes saved |
| 8 | </span> |
| 9 | <button aria-label="Dismiss" class="ml-auto text-base leading-none opacity-40 hover:opacity-100 bg-transparent border-0 p-0 cursor-pointer text-inherit"> |
| 10 | × |
| 11 | </button> |
| 12 | </div> |
| 13 | <div class="toast-mini flex items-center gap-2 px-3.5 py-2.5 rounded-lg text-xs font-medium text-red-500 bg-red-500/[0.06] animate-[slideIn_0.3s_ease]"> |
| 14 | <svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 15 | <line x1="18" y1="6" x2="6" y2="18"/> |
| 16 | <line x1="6" y1="6" x2="18" y2="18"/> |
| 17 | </svg> |
| 18 | <span> |
| 19 | Connection lost |
| 20 | </span> |
| 21 | <button aria-label="Dismiss" class="ml-auto text-base leading-none opacity-40 hover:opacity-100 bg-transparent border-0 p-0 cursor-pointer text-inherit"> |
| 22 | × |
| 23 | </button> |
| 24 | </div> |
| 25 | <div class="toast-mini flex items-center gap-2 px-3.5 py-2.5 rounded-lg text-xs font-medium text-blue-500 bg-blue-500/[0.06] animate-[slideIn_0.3s_ease]"> |
| 26 | <svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 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 | <span> |
| 32 | Tip: Press Cmd+K to search |
| 33 | </span> |
| 34 | <button aria-label="Dismiss" class="ml-auto text-base leading-none opacity-40 hover:opacity-100 bg-transparent border-0 p-0 cursor-pointer text-inherit"> |
| 35 | × |
| 36 | </button> |
| 37 | </div> |
| 38 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:360px"> |
| 2 | <div class="alert d-flex align-items-center gap-2 py-2 px-3 border-0 mb-0" style="background:rgba(34,197,94,.06);color:#22C55E;animation:slideIn .3s ease" role="alert"> |
| 3 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="flex-shrink-0"> |
| 4 | <polyline points="20 6 9 17 4 12"/> |
| 5 | </svg> |
| 6 | <span style="font-size:12px"> |
| 7 | Changes saved |
| 8 | </span> |
| 9 | <button type="button" class="btn-close btn-close-white ms-auto" style="filter:grayscale(100%) brightness(1.8)" aria-label="Close"> |
| 10 | </button> |
| 11 | </div> |
| 12 | <div class="alert d-flex align-items-center gap-2 py-2 px-3 border-0 mb-0" style="background:rgba(239,68,68,.06);color:#EF4444;animation:slideIn .3s ease" role="alert"> |
| 13 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="flex-shrink-0"> |
| 14 | <line x1="18" y1="6" x2="6" y2="18"/> |
| 15 | <line x1="6" y1="6" x2="18" y2="18"/> |
| 16 | </svg> |
| 17 | <span style="font-size:12px"> |
| 18 | Connection lost |
| 19 | </span> |
| 20 | <button type="button" class="btn-close btn-close-white ms-auto" style="filter:grayscale(100%) brightness(1.8)" aria-label="Close"> |
| 21 | </button> |
| 22 | </div> |
| 23 | <div class="alert d-flex align-items-center gap-2 py-2 px-3 border-0 mb-0" style="background:rgba(59,130,246,.06);color:#3B82F6;animation:slideIn .3s ease" role="alert"> |
| 24 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="flex-shrink-0"> |
| 25 | <circle cx="12" cy="12" r="10"/> |
| 26 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 27 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 28 | </svg> |
| 29 | <span style="font-size:12px"> |
| 30 | Tip: Press Cmd+K to search |
| 31 | </span> |
| 32 | <button type="button" class="btn-close btn-close-white ms-auto" style="filter:grayscale(100%) brightness(1.8)" aria-label="Close"> |
| 33 | </button> |
| 34 | </div> |
| 35 | </div> |
📝
note
Minimal toasts work well in developer tools and power-user interfaces where visual noise should be low. For consumer-facing apps, the richer variants with titles and descriptions are usually more appropriate.
Loading & Async
Toasts that communicate pending operations, success confirmation, and failure states — keep users informed during async workflows.
toast-loading
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="toast info loading"> |
| 3 | <span class="spinner"> |
| 4 | </span> |
| 5 | <div class="content"> |
| 6 | <strong> |
| 7 | Uploading... |
| 8 | </strong> |
| 9 | <p> |
| 10 | Please wait while we process your file. |
| 11 | </p> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="toast success"> |
| 15 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 16 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 17 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 18 | </svg> |
| 19 | <div class="content"> |
| 20 | <strong> |
| 21 | Upload complete |
| 22 | </strong> |
| 23 | <p> |
| 24 | video-final.mp4 is ready. |
| 25 | </p> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="toast error"> |
| 29 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 30 | <circle cx="12" cy="12" r="10"/> |
| 31 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 32 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 33 | </svg> |
| 34 | <div class="content"> |
| 35 | <strong> |
| 36 | Upload failed |
| 37 | </strong> |
| 38 | <p> |
| 39 | Network error. Tap to retry. |
| 40 | </p> |
| 41 | </div> |
| 42 | </div> |
| 43 | </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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:10px; |
| 16 | max-width:380px; |
| 17 | margin:0 auto |
| 18 | } |
| 19 | .toast { |
| 20 | display:flex; |
| 21 | align-items:flex-start; |
| 22 | gap:10px; |
| 23 | padding:14px 16px; |
| 24 | border-radius:10px; |
| 25 | font-size:12px; |
| 26 | line-height:1.4; |
| 27 | animation:slideIn .3s ease |
| 28 | } |
| 29 | .toast svg { |
| 30 | flex-shrink:0; |
| 31 | margin-top:1px |
| 32 | } |
| 33 | .content strong { |
| 34 | display:block; |
| 35 | margin-bottom:2px; |
| 36 | font-size:12px |
| 37 | } |
| 38 | .content p { |
| 39 | margin:0; |
| 40 | opacity:.8; |
| 41 | font-size:11px |
| 42 | } |
| 43 | .spinner { |
| 44 | width:16px; |
| 45 | height:16px; |
| 46 | border:2px solid rgba(59, |
| 47 | 130, |
| 48 | 246, |
| 49 | .2); |
| 50 | border-top-color:#3B82F6; |
| 51 | border-radius:50%; |
| 52 | animation:spin .8s linear infinite; |
| 53 | flex-shrink:0; |
| 54 | margin-top:1px |
| 55 | } |
| 56 | @keyframes spin { |
| 57 | to { |
| 58 | transform:rotate(360deg) |
| 59 | } |
| 60 | } |
| 61 | .info { |
| 62 | background:#0A0F1A; |
| 63 | border:1px solid rgba(59, |
| 64 | 130, |
| 65 | 246, |
| 66 | .25); |
| 67 | color:#3B82F6 |
| 68 | } |
| 69 | .success { |
| 70 | background:#0A1A0A; |
| 71 | border:1px solid rgba(34, |
| 72 | 197, |
| 73 | 94, |
| 74 | .25); |
| 75 | color:#22C55E |
| 76 | } |
| 77 | .error { |
| 78 | background:#1A0A0A; |
| 79 | border:1px solid rgba(239, |
| 80 | 68, |
| 81 | 68, |
| 82 | .25); |
| 83 | color:#EF4444 |
| 84 | } |
| 85 | @keyframes slideIn { |
| 86 | from { |
| 87 | opacity:0; |
| 88 | transform:translateX(20px) |
| 89 | } |
| 90 | to { |
| 91 | opacity:1; |
| 92 | transform:translateX(0) |
| 93 | } |
| 94 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-2.5 max-w-sm mx-auto p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A0F1A] border border-blue-500/25 text-blue-500 animate-[slideIn_0.3s_ease]"> |
| 3 | <span class="w-4 h-4 mt-0.5 shrink-0 rounded-full border-2 border-blue-500/20 border-t-blue-500 animate-spin"> |
| 4 | </span> |
| 5 | <div> |
| 6 | <strong class="block mb-0.5 text-xs"> |
| 7 | Uploading... |
| 8 | </strong> |
| 9 | <p class="opacity-80 text-[11px]"> |
| 10 | Please wait while we process your file. |
| 11 | </p> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#0A1A0A] border border-green-500/25 text-green-500 animate-[slideIn_0.3s_ease]"> |
| 15 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 16 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 17 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 18 | </svg> |
| 19 | <div> |
| 20 | <strong class="block mb-0.5 text-xs"> |
| 21 | Upload complete |
| 22 | </strong> |
| 23 | <p class="opacity-80 text-[11px]"> |
| 24 | video-final.mp4 is ready. |
| 25 | </p> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] text-xs leading-relaxed bg-[#1A0A0A] border border-red-500/25 text-red-500 animate-[slideIn_0.3s_ease]"> |
| 29 | <svg class="w-4 h-4 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 30 | <circle cx="12" cy="12" r="10"/> |
| 31 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 32 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 33 | </svg> |
| 34 | <div> |
| 35 | <strong class="block mb-0.5 text-xs"> |
| 36 | Upload failed |
| 37 | </strong> |
| 38 | <p class="opacity-80 text-[11px]"> |
| 39 | Network error. Tap to retry. |
| 40 | </p> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-2 mx-auto" style="max-width:380px"> |
| 2 | <div class="alert alert-primary d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A0F1A;color:#3B82F6;border:1px solid rgba(59,130,246,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 3 | <span class="spinner-border spinner-border-sm flex-shrink-0 mt-0.5" role="status" aria-hidden="true"> |
| 4 | </span> |
| 5 | <div> |
| 6 | <strong class="d-block" style="font-size:12px"> |
| 7 | Uploading... |
| 8 | </strong> |
| 9 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 10 | Please wait while we process your file. |
| 11 | </p> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="alert alert-success d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#0A1A0A;color:#22C55E;border:1px solid rgba(34,197,94,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 15 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 16 | <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> |
| 17 | <polyline points="22 4 12 14.01 9 11.01"/> |
| 18 | </svg> |
| 19 | <div> |
| 20 | <strong class="d-block" style="font-size:12px"> |
| 21 | Upload complete |
| 22 | </strong> |
| 23 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 24 | video-final.mp4 is ready. |
| 25 | </p> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="alert alert-danger d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#1A0A0A;color:#EF4444;border:1px solid rgba(239,68,68,.25)!important;animation:slideIn .3s ease" role="alert"> |
| 29 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0 mt-0.5"> |
| 30 | <circle cx="12" cy="12" r="10"/> |
| 31 | <line x1="15" y1="9" x2="9" y2="15"/> |
| 32 | <line x1="9" y1="9" x2="15" y2="15"/> |
| 33 | </svg> |
| 34 | <div> |
| 35 | <strong class="d-block" style="font-size:12px"> |
| 36 | Upload failed |
| 37 | </strong> |
| 38 | <p class="mb-0" style="font-size:11px;opacity:.8"> |
| 39 | Network error. Tap to retry. |
| 40 | </p> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
Accessibility
Toasts must be announced to assistive technologies and remain keyboard reachable. Without the right ARIA attributes, transient notifications are easy for screen-reader users to miss.
- Wrap each toast in a container with role="status" for non-critical updates or role="alert" for errors.
- Add aria-live="polite" (success/info) or aria-live="assertive" (error/warning) so screen readers announce them.
- Provide visible focus styles and a keyboard-operable close button. Do not rely solely on auto-dismiss.
- Give the close button an explicit aria-label="Dismiss notification" when the visible text is only an icon.
- Keep toast text concise. A title + one sentence is usually enough; move longer content into a dedicated page or dialog.
- Respect reduced motion: disable entrance/exit animations when prefers-reduced-motion: reduce is active.
Animations & Motion
A toast should feel alive without stealing attention. The canonical micro-interaction pairs a slide-in from the viewport edge with a shrinking progress bar that communicates remaining dwell time. Keep easing snappy—around 300–450 ms—and let the element exit with the same directional logic so the flow feels predictable.
toast-animations
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <button id="trigger" class="trigger" type="button"> |
| 3 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
| 5 | <path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
| 6 | </svg> |
| 7 | Show notification |
| 8 | </button> |
| 9 | <div id="stack" class="stack"> |
| 10 | </div> |
| 11 | <template id="toast-template"> |
| 12 | <div class="toast" role="status" aria-live="polite"> |
| 13 | <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 14 | <polyline points="20 6 9 17 4 12"/> |
| 15 | </svg> |
| 16 | <div class="content"> |
| 17 | <strong> |
| 18 | Success |
| 19 | </strong> |
| 20 | <span> |
| 21 | Your changes were saved. |
| 22 | </span> |
| 23 | </div> |
| 24 | <button class="close" aria-label="Dismiss"> |
| 25 | × |
| 26 | </button> |
| 27 | <div class="progress" aria-hidden="true"> |
| 28 | </div> |
| 29 | </div> |
| 30 | </template> |
| 31 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | box-sizing:border-box; |
| 3 | margin:0; |
| 4 | padding:0 |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | -apple-system, |
| 9 | sans-serif; |
| 10 | background:#0A0A0A; |
| 11 | color:#E0E0E0; |
| 12 | padding:24px |
| 13 | } |
| 14 | .wrap { |
| 15 | max-width:360px; |
| 16 | margin:0 auto; |
| 17 | display:flex; |
| 18 | flex-direction:column; |
| 19 | gap:16px |
| 20 | } |
| 21 | .trigger { |
| 22 | display:inline-flex; |
| 23 | align-items:center; |
| 24 | gap:8px; |
| 25 | padding:10px 16px; |
| 26 | border-radius:8px; |
| 27 | border:1px solid #00FF41; |
| 28 | background:#111; |
| 29 | color:#00FF41; |
| 30 | font-size:12px; |
| 31 | font-weight:600; |
| 32 | cursor:pointer; |
| 33 | transition:transform .15s ease, |
| 34 | box-shadow .2s ease |
| 35 | } |
| 36 | .trigger:hover { |
| 37 | box-shadow:0 0 12px rgba(0, |
| 38 | 255, |
| 39 | 65, |
| 40 | .25) |
| 41 | } |
| 42 | .trigger:active { |
| 43 | transform:scale(.96) |
| 44 | } |
| 45 | .trigger:focus-visible { |
| 46 | outline:2px solid #1A1A2E; |
| 47 | outline-offset:2px |
| 48 | } |
| 49 | .stack { |
| 50 | display:flex; |
| 51 | flex-direction:column; |
| 52 | gap:10px |
| 53 | } |
| 54 | .toast { |
| 55 | position:relative; |
| 56 | display:flex; |
| 57 | align-items:flex-start; |
| 58 | gap:10px; |
| 59 | padding:14px 16px; |
| 60 | border-radius:10px; |
| 61 | background:#151515; |
| 62 | border:1px solid #111; |
| 63 | box-shadow:0 10px 25px rgba(0, |
| 64 | 0, |
| 65 | 0, |
| 66 | .4); |
| 67 | overflow:hidden; |
| 68 | animation:slideIn .45s cubic-bezier(.22, |
| 69 | 1, |
| 70 | .36, |
| 71 | 1) forwards |
| 72 | } |
| 73 | .toast.exiting { |
| 74 | animation:slideOut .25s ease forwards |
| 75 | } |
| 76 | .icon { |
| 77 | color:#00FF41; |
| 78 | flex-shrink:0; |
| 79 | margin-top:1px |
| 80 | } |
| 81 | .content { |
| 82 | display:flex; |
| 83 | flex-direction:column; |
| 84 | gap:2px |
| 85 | } |
| 86 | .content strong { |
| 87 | font-size:12px; |
| 88 | color:#E0E0E0 |
| 89 | } |
| 90 | .content span { |
| 91 | font-size:11px; |
| 92 | color:#A0A0A0 |
| 93 | } |
| 94 | .close { |
| 95 | background:none; |
| 96 | border:none; |
| 97 | color:#A0A0A0; |
| 98 | font-size:16px; |
| 99 | line-height:1; |
| 100 | cursor:pointer; |
| 101 | margin-left:auto; |
| 102 | padding:0; |
| 103 | transition:color .15s ease |
| 104 | } |
| 105 | .close:hover { |
| 106 | color:#E0E0E0 |
| 107 | } |
| 108 | .progress { |
| 109 | position:absolute; |
| 110 | left:0; |
| 111 | bottom:0; |
| 112 | height:3px; |
| 113 | width:100%; |
| 114 | background:#00FF41; |
| 115 | transform-origin:left; |
| 116 | animation:shrink 4s linear forwards |
| 117 | } |
| 118 | @keyframes slideIn { |
| 119 | from { |
| 120 | opacity:0; |
| 121 | transform:translateX(30px) |
| 122 | } |
| 123 | to { |
| 124 | opacity:1; |
| 125 | transform:translateX(0) |
| 126 | } |
| 127 | } |
| 128 | @keyframes slideOut { |
| 129 | to { |
| 130 | opacity:0; |
| 131 | transform:translateX(20px) |
| 132 | } |
| 133 | } |
| 134 | @keyframes shrink { |
| 135 | from { |
| 136 | transform:scaleX(1) |
| 137 | } |
| 138 | to { |
| 139 | transform:scaleX(0) |
| 140 | } |
| 141 | } |
| 142 | @media (prefers-reduced-motion:reduce) { |
| 143 | .toast, |
| 144 | .trigger { |
| 145 | animation:none; |
| 146 | transition:none |
| 147 | } |
| 148 | .progress { |
| 149 | animation:none |
| 150 | } |
| 151 | } |
untitled.js
JavaScript
| 1 | const trigger=document.getElementById('trigger');const template=document.getElementById('toast-template');const stack=document.getElementById('stack');function removeToast(t){t.classList.add('exiting');t.addEventListener('animationend',()=>t.remove())}function showToast(){const clone=template.content.cloneNode(true);const toast=clone.querySelector('.toast');const progress=toast.querySelector('.progress');const close=toast.querySelector('.close');close.addEventListener('click',()=>removeToast(toast));progress.addEventListener('animationend',()=>removeToast(toast));stack.appendChild(toast)}trigger.addEventListener('click',showToast);showToast() |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-sm mx-auto p-6 bg-[#0A0A0A] text-[#E0E0E0]"> |
| 2 | <style> |
| 3 | @keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} |
| 4 | @keyframes slideOut{to{opacity:0;transform:translateX(20px)}} |
| 5 | @keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}} |
| 6 | @media (prefers-reduced-motion:reduce){.toast-motion{animation:none!important}.toast-motion .progress-motion{animation:none!important}} |
| 7 | </style> |
| 8 | <button id="trigger" type="button" class="inline-flex items-center gap-2 self-start px-4 py-2.5 rounded-lg border border-[#00FF41] bg-[#111] text-[#00FF41] text-xs font-semibold cursor-pointer transition-all hover:shadow-[0_0_12px_rgba(0,255,65,0.25)] active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-[#1A1A2E] focus-visible:outline-offset-2"> |
| 9 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 10 | <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
| 11 | <path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
| 12 | </svg> |
| 13 | Show notification |
| 14 | </button> |
| 15 | <div id="stack" class="flex flex-col gap-2.5"> |
| 16 | </div> |
| 17 | <template id="toast-template"> |
| 18 | <div class="toast-motion relative flex items-start gap-2.5 px-4 py-3.5 rounded-[10px] bg-[#151515] border border-[#111] shadow-[0_10px_25px_rgba(0,0,0,0.4)] overflow-hidden animate-[slideIn_0.45s_cubic-bezier(0.22,1,0.36,1)_forwards]" role="status" aria-live="polite"> |
| 19 | <svg class="w-4 h-4 text-[#00FF41] shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 20 | <polyline points="20 6 9 17 4 12"/> |
| 21 | </svg> |
| 22 | <div class="flex flex-col gap-0.5"> |
| 23 | <strong class="text-xs text-[#E0E0E0]"> |
| 24 | Success |
| 25 | </strong> |
| 26 | <span class="text-[11px] text-[#A0A0A0]"> |
| 27 | Your changes were saved. |
| 28 | </span> |
| 29 | </div> |
| 30 | <button aria-label="Dismiss" class="ml-auto text-[#A0A0A0] hover:text-[#E0E0E0] text-base leading-none bg-transparent border-0 p-0 cursor-pointer transition-colors"> |
| 31 | × |
| 32 | </button> |
| 33 | <div class="progress-motion absolute left-0 bottom-0 h-[3px] w-full bg-[#00FF41] origin-left animate-[shrink_4s_linear_forwards]" aria-hidden="true"> |
| 34 | </div> |
| 35 | </div> |
| 36 | </template> |
| 37 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3" style="max-width:360px"> |
| 2 | <style> |
| 3 | @keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} |
| 4 | @keyframes slideOut{to{opacity:0;transform:translateX(20px)}} |
| 5 | @keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}} |
| 6 | .toast-motion{animation:slideIn .45s cubic-bezier(.22,1,.36,1) forwards;position:relative;overflow:hidden} |
| 7 | .toast-motion.exiting{animation:slideOut .25s ease forwards} |
| 8 | .progress-motion{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#00FF41;transform-origin:left;animation:shrink 4s linear forwards} |
| 9 | @media (prefers-reduced-motion:reduce){.toast-motion,.progress-motion{animation:none}} |
| 10 | </style> |
| 11 | <button id="trigger" type="button" class="btn d-inline-flex align-items-center gap-2 align-self-start" style="background:#111;color:#00FF41;border:1px solid #00FF41;font-size:12px;font-weight:600"> |
| 12 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 13 | <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
| 14 | <path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
| 15 | </svg> |
| 16 | Show notification |
| 17 | </button> |
| 18 | <div id="stack" class="d-flex flex-column gap-2"> |
| 19 | </div> |
| 20 | <template id="toast-template"> |
| 21 | <div class="alert toast-motion d-flex align-items-start gap-2 p-3 border-0 mb-0" style="background:#151515;color:#E0E0E0;box-shadow:0 10px 25px rgba(0,0,0,.4)" role="status" aria-live="polite"> |
| 22 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5"> |
| 23 | <polyline points="20 6 9 17 4 12"/> |
| 24 | </svg> |
| 25 | <div> |
| 26 | <strong style="font-size:12px;color:#E0E0E0;display:block"> |
| 27 | Success |
| 28 | </strong> |
| 29 | <span style="font-size:11px;color:#A0A0A0"> |
| 30 | Your changes were saved. |
| 31 | </span> |
| 32 | </div> |
| 33 | <button type="button" class="ms-auto bg-transparent border-0 p-0" style="color:#A0A0A0;cursor:pointer" aria-label="Dismiss"> |
| 34 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 35 | <line x1="18" y1="6" x2="6" y2="18"/> |
| 36 | <line x1="6" y1="6" x2="18" y2="18"/> |
| 37 | </svg> |
| 38 | </button> |
| 39 | <div class="progress-motion" aria-hidden="true"> |
| 40 | </div> |
| 41 | </div> |
| 42 | </template> |
| 43 | </div> |
📝
note
Respect prefers-reduced-motion: reduce by disabling slide and scale transforms and setting animation: none. Users with vestibular disorders may experience nausea from off-screen motion, so make the reduced-motion fallback instant and equivalent in meaning.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.