Toast
Toast provide brief notifications. The component is also known as a Snackbar.
Basic Toast/Snackbar
Toast component can be created by using toast class.
The toast offers five severity levels that set a distinctive icon and color.
Code Snippets
Default message!
Info message
Success message
Warning message
Error message
Live Toast Example
Click on star to see toast message.
Success message
Code Snippets
HTML snippet
Success message
JS snippet
/*-----------TOAST DEMO---------------------*/
const openToastBtn = document.querySelector(".open-toast-btn");
const closeToastBtn = document.querySelector(".close-toast-btn");
const toast = document.querySelector(".example-toast");
const openToast = () => {
toast.classList.add("show-toast");
setTimeout(() => {
closeToast()
},2000);
};
const closeToast = () => {
toast.classList.remove("show-toast");
};
openToastBtn.addEventListener("click", openToast);
closeToastBtn.addEventListener("click", closeToast);