Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain Dialogs in Materialize CSS

  • Last Updated : 07 Oct, 2021

Dialogs in Materialize CSS provide users additional information to users if needed by them. These are directly not visible on the web-page. The dialog transitions are related to the information that is required at that point of time. Materialize provides various methods to show dialogs.


Materialize.toast(string, time, styleClass,callback);


  • string: It is the string that needs to be displayed in the dialog.
  • time: It is the time for what message string would be shown.
  • style class: This is to add various styles.
  • callback: This callback is a method to be called once the toast is discharged.

Linked Files: Include materialize and jQuery CDN into the <head> tag before all other stylesheets to load our CSS and JavaScript.

<link rel = “stylesheet” href = “”>
<script type = “text/javascript” src = “”></script>
<script src = “”></script>

Example: The below example shows the implementation of dialogs in Materialize CSS.


<!DOCTYPE html>
    <link rel="stylesheet" href=
    <script type="text/javascript" 
    <script src=
        function Toast1(string, timeLength) {
                '<em>' + string + '</em>', timeLength
        function Toast2(string, timeLength) {
                '<b>' + string + '</b>', timeLength, 'rounded'
        function Toast3(string, timeLength) {
                '<u>' + string + '<u>', timeLength
    <body class="container">
        <a class="btn" onclick=
            "Toast1('Emphasized Alert!', 1500)">
            Emphasized Alert!!
        <a class="btn" onclick=
            "Toast2('Bold N rounded Alert!', 1500)">
            Bold N rounded Alert!!
        <a class="btn" onclick=
            "Toast3('Underlined Alert!', 1500)">
            Underlined Alert!!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!