Article Categories

Selected Reading

Explain Dialogs in Materialize CSS

CSS Web Development Front End Technology

Materialize CSS dialogs (commonly known as toasts) are temporary notification messages that appear to provide feedback to users. They are lightweight, non-intrusive notifications that display important information and automatically dismiss after a specified duration.

Syntax

Materialize.toast(content, duration, classes, callback);

Parameters

Parameter	Description
`content`	The message text or HTML content to display
`duration`	Display time in milliseconds (e.g., 4000 for 4 seconds)
`classes`	Optional CSS classes for styling (e.g., 'rounded', 'red')
`callback`	Function to execute after toast is dismissed

Setup Requirements

Include the following CDN links in your HTML <head> section to use Materialize CSS dialogs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Example: Basic Dialog Toasts

The following example demonstrates different types of dialog toasts with various styling options

<!DOCTYPE html>
<html>
<head>
    <title>Materialize CSS Dialogs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
    <div class="container">
        <h4>Materialize CSS Dialog Examples</h4>
        
        <button class="btn blue" onclick="showBasicToast()">Basic Dialog</button>
        <button class="btn green" onclick="showSuccessToast()">Success Dialog</button>
        <button class="btn red" onclick="showErrorToast()">Error Dialog</button>
        <button class="btn orange" onclick="showRoundedToast()">Rounded Dialog</button>
    </div>

    <script>
        function showBasicToast() {
            M.toast({html: 'Basic notification message', displayLength: 3000});
        }
        
        function showSuccessToast() {
            M.toast({html: '<i class="material-icons">check</i> Success! Operation completed', 
                    classes: 'green', displayLength: 4000});
        }
        
        function showErrorToast() {
            M.toast({html: '<i class="material-icons">error</i> Error occurred!', 
                    classes: 'red', displayLength: 5000});
        }
        
        function showRoundedToast() {
            M.toast({html: 'Rounded corners dialog', 
                    classes: 'rounded orange', displayLength: 3000});
        }
    </script>
</body>
</html>

Four buttons appear on the page. Clicking each button displays a different styled toast notification:
- Basic Dialog: Simple gray toast
- Success Dialog: Green toast with checkmark icon
- Error Dialog: Red toast with error icon  
- Rounded Dialog: Orange toast with rounded corners
Each toast automatically disappears after the specified duration.

Common Toast Classes

Class	Effect
`red`	Red background for error messages
`green`	Green background for success messages
`blue`	Blue background for information
`rounded`	Applies rounded corners to the toast

Conclusion

Materialize CSS dialogs provide an elegant way to display temporary notifications to users. Use them for success messages, error alerts, or general information that needs user attention without interrupting the workflow.

Riya Kumari

Updated on: 2026-03-15T15:55:50+05:30

264 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next