<button onclick="showToast('Success', 'Your changes have been saved!', 'success')" class="trigger-btn success">Show Success</button>
<button onclick="showToast('Error', 'Something went wrong.', 'error')" class="trigger-btn error">Show Error</button>
<div id="toastContainer" class="toast-container"></div>
.toast-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.toast {
background: #fff;
min-width: 300px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 12px;
border-left: 4px solid #3b82f6;
animation: slideIn 0.3s ease forwards;
transition: opacity 0.3s, transform 0.3s;
}
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
.toast-content h4 {
margin: 0;
font-size: 0.95rem;
color: #1f2937;
}
.toast-content p {
margin: 2px 0 0;
font-size: 0.85rem;
color: #6b7280;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
to { opacity: 0; transform: translateX(20px); }
}
.trigger-btn {
padding: 10px 20px;
margin: 10px;
border: none;
color: white;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.trigger-btn.success { background: #10b981; }
.trigger-btn.error { background: #ef4444; }
const container = document.getElementById("toastContainer");
function showToast(title, message, type = "default") {
const toast = document.createElement("div");
toast.classList.add("toast", type);
toast.innerHTML = `
<div class="toast-content">
<h4>${title}</h4>
<p>${message}</p>
</div>
`;
container.appendChild(toast);
// Remove after 3 seconds
setTimeout(() => {
toast.style.animation = "fadeOut 0.3s forwards";
toast.addEventListener("animationend", () => {
toast.remove();
});
}, 3000);
}
