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> Source Code
Download<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a> 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> 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> 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> Source Code : Output
×
![Modal Image]()