Materialize CSS Toast

Materialize CSS toast is basically a small alert box that appears for a couple of seconds whenever the user clicks on any link, button, etc.

Steps to create a Materialize toasts.

To add a toast inside the application, simply call M.toast() function through the onclick event inside the button or hyperlink element.

General Syntax

    <a onclick="M.toast({html: 'Write your toast message'})" class="btn">Click To see Toast!</a>
     
Try It Now

Source Code

     
      <a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>     
    
Try it yourself

Toast Styling

You can style the toast either using user specific CSS styles or a predefined CSS class. You have to pass predefined CSS class such as .rounded or user specific CSS class to the toast function.

Example

Source Code

     
      <a onclick="M.toast({html: 'I am a toast!', classes: 'rounded'})" class="btn">Rounded Toast!</a>     
    
Try it yourself

Toast With Custom HTML

You can pass HTML string as the first argument inside the toast function.

Source Code

     
      <a class="waves-effect waves-light btn" onclick="displayCustomHTMLToast()">Toast with Action</a>     
    
Try it yourself

Toast: Callback Function

You can also use callback function inside the toast.This callback function will be fired after the completion of the toast function.

Source Code

     
      <a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast With Callback</a>     
    
Try it yourself

Web Tutorials

Materialize CSS Toast
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS