Materialize Toasts

Materialize Toasts: Toasts are basically used to provide the unobtrusive alerts to the user. Here in this tutorial we are going to explain how you can create Toasts in Materialize. You can also use our online editor to edit and run the code online.

Materialize Toasts Example

Materialize.toast() function is used to create the toast in Materialize framework. It accepts mainly four parameters- 1. text, 2,. timeout. 3. rounded class, 4. callback. Text is the message that will be displayed in toast and timeout is used to add the time in milliseconds after which the text message will be disappeared. Third parameter is used for rounded toast and fourth parameter is callback. Third and fourth parameters are optional. Here is a very basic example of toast-

 <a class="btn" onclick="Materialize.toast('I am First Toast!', 3000)">First Toast</a>   

If you run the above example it will produce the output something like this –

Custom HTML

Sometimes we need to add custom HTML in toast content,you can add HTML content in Toast simply as below-

 
<script> 
function myToast(){
var $toastContent = $('<div style="background:yellow;color:red;">Toast With Custom Content</div>');
  Materialize.toast($toastContent, 5000);
}
</script>
<a class="btn" onclick="myToast()">Custom Html Toast</a>

If you run the above example will generate output something like this-

Callback

You can add a callback function when the toast is dissmissed –

 
<script> 
function myToast(){
var $toastContent = $('<div style="background:yellow;color:red;">Toast With Callback Function</div>');
  Materialize.toast($toastContent, 5000,"", function(){ alert('Your toast was dismissed')});
}
</script>
<a class="btn" onclick="myToast()">Toast Callback</a> 

Alert will be triggered when the Toast is dismissed.

Rounded Toast

To create rounded toast you can simply pass the third parameter as ’rounded’ –

 
<a class="btn" onclick="  Materialize.toast('Rounded Toast Example', 5000, 'rounded');">Rounded Toast</a>

If you run the above example it will produce the output something like this –

Add Comment

📖 Read More

• 1. Materialize Tooltips
• 2. Materialize Dropdown
• 3. Materialize SideNav
• 4. Materialize Css Modal Popup