Snackbar

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn't interrupt the user experience, and they don't require user input to disappear. Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

Examples

                     
<button onclick="showSnackbar()">click me</button>
<div class="snackbar bg-grey-500">this is a toast</div>
                     
                  

                    
function showSnackbar() {
    var x = document.querySelector(".snackbar");
                    
    console.log(x);
                    
    x.classList.add("show");
                    
    setTimeout(function () {
      x.classList.remove("show");
    }, 3000);
}