Materialize Toast

Materialize Toast

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

Example

Click Here To See Toast!

Steps to create Materialize CSS toast.

To add Materialize CSS 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

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

Source Code : Output

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.

Source Code

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

Source Code : Output

Toast With Custom HTML

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

Source Code

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

Source Code : Output

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.

General Syntax

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

Source Code : Output

Web Tutorials

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