Onsen UI CSS Component Basic Toast

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.

Output:

👁 Image

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

Output:

👁 Image

Reference: https://onsen.io/v2/api/css.html#toast-category