×

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

Click me to show the snackbar
Javascript is required for snackbar.
                   
<div class="bg-grey-800 text-white invisible text-md" id="snackbar">
    Click on the button to show the snackbar. It will disappear after 3
    seconds
</div>

<a onclick="showSnackbar()" class="btn btn-link-sky">click me</a>
                   
                
                    
function showSnackbar() {
var x = document.getElementById("snackbar");
x.classList.remove("invisible");

setTimeout(function () {

x.classList.add("invisible");
}, 5000);
}