|$ curl https://forge-ai.dev/api/markdown?path=docs/components/toast
$cat docs/toast-notifications.md
updated Recently·12 min read·published
Toast Notifications
Toast notifications with success, error, warning, and info variants — auto-dismiss, stacking, positions, and progress indicators.
Toast Variants
Four semantic toast types with matching 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 | } |
ℹ
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"> |
| 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"> |
| 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)})}) |
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 | } |
✓
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 | } |
⚠
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 | } |
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 | } |
🔥
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 | } |
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"> |
| 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"> |
| 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"> |
| 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)})}) |
📝
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.