Toast

A toast is a subtle notification commonly used in modern applications. It can be used to provide feedback to the user or display a system message. The toast appears on bottom of the screen and can be dismissed.

Demo

Show Toast

This is a toast!x

              
<section class="demo"><div class="flex-row">
<button id="call-modal" class="btn" onclick="showToast()">Show Toast</button></div>
  
<div id="toast-container" class="toast"><span>This is a toast!</span><span class="toast-close" onclick="closeToast()">x</span></div>
</section>
              
            

JS

  
const showToast = () => {
      document.getElementById("toast-container").style.display="flex";
      setTimeout(hideToast,5000);
    }
const closeToast = () => {
    document.getElementById("toast-container").style.transform = "translate(100vw,0)"; 
    setTimeout(hideToast,200);

    }
const hideToast = () => {
    document.getElementById("toast-container").style.display = "none";
    document.getElementById("toast-container").style.transform = "unset";        
      
    }