Onsen UI Toast CSS Components

Last Updated : 02 Sep, 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.

Toasts are components used to notify the users and take immediate action on them. The toast contains a message and action buttons. Material toasts have sharp corner boxes and don’t have any margin. In this article, we will discuss Onsen UI Toast CSS Components.

Onsen UI Toast CSS Components:

Basic Toast: It is used to create the basic toast.
Material Toast: It is used to create the material toast.

Syntax:

<div class="toast ...">
    <div class="toast__message">
        ...
    </div>
    <button class="toast__button">
        ...
    </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 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> 