Example
Click on the buttons below to get the different toast demo.
A default toast!
Your Image is uploaded success fully.
Your file is corrupted.
Failed to upload your file.
Uploading your file.
<button class="btn btn-primary open-toast-btn" value="toast-default">Open Default toast</button>
<button class="btn btn-primary open-toast-btn" value="toast-success">Open Success toast</button>
<button class="btn btn-primary open-toast-btn" value="toast-warning">Open Warning toast</button>
<button class="btn btn-primary open-toast-btn" value="toast-error">Open Error toast</button>
<button class="btn btn-primary open-toast-btn" value="toast-info">Open Info toast</button>
<!-- Default Toast -->
<div class="toast toast-default">
<section class="toast-body">
<p>
A default toast!
</p>
<button class="btn btn-icon toast-close-btn">
<i class="fas fa-times"></i>
</button>
</section>
</div>
<!-- Success Toast -->
<div class="toast toast-success">
<section class="toast-body">
<p>
<i class="fas fa-check-circle"></i>
Your Image is uploaded success fully.
</p>
<button class="btn btn-icon toast-close-btn">
<i class="fas fa-times"></i>
</button>
</section>
</div>
<!-- Warning Toast -->
<div class="toast toast-warning">
<section class="toast-body">
<p>
<i class="fas fa-exclamation-triangle"></i>
Your file is corrupted.
</p>
<button class="btn btn-icon toast-close-btn">
<i class="fas fa-times"></i>
</button>
</section>
</div>
<!-- Error Toast -->
<div class="toast toast-error">
<section class="toast-body">
<p>
<i class="fas fa-exclamation-circle"></i>
Failed to upload your file.
</p>
<button class="btn btn-icon toast-close-btn">
<i class="fas fa-times"></i>
</button>
</section>
</div>
<!-- Info Toast -->
<div class="toast toast-info">
<section class="toast-body">
<p>
<i class="fas fa-info-circle"></i>
Uploading your file.
</p>
<button class="btn btn-icon toast-close-btn">
<i class="fas fa-times"></i>
</button>
</section>
</div>
JS code
In the below code your-toast-type-name has to rewritten with the class of the toast type used.
const toast = document.querySelector("your-toast-type-name")
const openToastBtn = document.querySelector(".open-toast-btn")
const closeToastBtn = document.querySelector(".toast-close-btn")
openToastBtn.addEventListener("click", () => {
toast.classList.add("show-toast")
setTimeout(() => {
toast.classList.remove("show-toast")
}, 5000)
})
closeToastBtn.addEventListener("click", () => {
toast.classList.remove("show-toast")
})