Toasts

Toasts are content that are not original visible on a page but show up with extra information if needed. The transitions should make the appearance of the toast make sense and not jarring to the user.

Basic

Toast! 
                        
<a class="btn waves-effect waves-light default" onclick="displayBasicToast()">Toast!</a>
                                
                            
                    
function displayBasicToast()
{
    Materialize.toast('I am a toast!', 4000); // 4000 is the duration of the toast
}

Custom HTML

Toast with Action 
                        
<a class="waves-effect waves-light btn default" onclick="displayCustomHTMLToast()">Toast with Action</a>
                                
                            
                    
function displayCustomHTMLToast()
{
    var $toastContent = $('<span>I am toast content</span>');
    Materialize.toast($toastContent, 5000);
}

Callback

Toast with Callback 
                        
<a class="waves-effect waves-light btn default" onclick="Materialize.toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast with Callback</a>

Styling Toasts

Round Toast! 
                        
<a class="waves-effect waves-light btn default" onclick="Materialize.toast('I am a toast!', 3000, 'rounded')">Round Toast!</a>