Onsen UI CSS Component Basic 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 Basic Toast component. Toasts are components used to notify the users and take some immediate action on them. Toast contains a message and action buttons. Basic toasts have rounded corner boxes with margins.

Onsen UI CSS Component Basic Toast classes:

toast: This class is used to create a toast.
toast__message: The container with this class contains the message.
toast__button: This is used to create a button for the toast.

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

<div class="toast">
    <div class="toast__message">
        Welcome to GeeksforGeeks
    </div>
    <button class="toast__button">Close</button>
</div>

Example 1: In this example, we are creating a basic 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 Basic Toast 
        </strong> 
    </center> 
  
    <div class="toast"> 
        <div class="toast__message"> 
            Welcome to GeeksforGeeks 
        </div> 
        <button class="toast__button">Close</button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we are going to show and hide the basic 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 Basic Toast 
        </strong> 
  
        <button class="button" onclick="showToast()"> 
            Show Toast 
        </button> 
    </center> 
  
    <div id="toast" class="toast"> 
        <div class="toast__message"> 
            Welcome to GeeksforGeeks 
        </div> 
        <button onclick="closeToast()" 
            class="toast__button"> 
            Close 
        </button> 
    </div> 
  
    <script> 
        function closeToast() { 
            $('#toast').hide() 
        } 
        function showToast() { 
            $('#toast').show() 
        } 
    </script> 
</body> 
  
</html>