Onsen UI CSS Component Material Toast

Last Updated : 13 Jun, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

In this article, we are going to implement the Onsen UI CSS Component Material Toast component. Toasts are components used to notify the users and take some immediate action on them. Toast contains a message and action buttons. Material toasts have sharp corner boxes and don’t have any margin.

Onsen UI CSS Component Material Toast classes:

toast: This class is used to create a toast.
toast–material: This class denotes the toast of material type.
toast__message: The container with this class contains the message.
toast–material__message: This class denotes that the container containing the message is of material type.
toast__button: This is used to create a button for the toast.
toast–material__button: This class denotes that the toast button is of material type.

Syntax: Create a material toast in onsen UI as follows:

<div class="toast toast--material">
    <div class="toast__message toast--material__message">
        Welcome to GeeksforGeeks
    </div>
    <button class="toast__button 
        toast--material__button">Close</button>
</div>

Example 1: In this example, we have a material toast with a message.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading">GeeksforGeeks</h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Toast 
        </strong> 
    </center> 
  
    <div class="toast toast--material"> 
        <div class="toast__message toast--material__message"> 
            Welcome to GeeksforGeeks 
        </div> 
        <button class="toast__button  
            toast--material__button">Close</button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we are going to show and hide the toast using the buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
        "https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading">GeeksforGeeks</h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Toast 
        </strong> 
  
        <button class="button" onclick="showToast()"> 
            Show Toast 
        </button> 
    </center> 
  
    <div id="toast" class="toast toast--material"> 
        <div class="toast__message toast--material__message"> 
            Welcome to GeeksforGeeks 
        </div> 
        <button onclick="closeToast()" class= 
            "toast__button toast--material__button"> 
            Close 
        </button> 
    </div> 
  
    <script> 
        function closeToast() { 
            $('#toast').hide() 
        } 
        function showToast() { 
            $('#toast').show() 
        } 
    </script> 
</body> 
  
</html>