Onsen UI Toast CSS Components

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.

Output:

👁 Image

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

Output:

👁 Image

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