Style and appearance in JavaScript Toast control

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the toast title

Use the following CSS to customize the default toast’s content properties like font-family, font-size and color.

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: red;
    font-size: 18px;
    font-weight: bold;
}

Customizing the toast content

Use the following CSS to customize the default toast’s content properties like font-family, font-size and color.

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: aqua;
    font-size: 13px;
    font-weight: normal;
}

Customizing the toast icon

Use the following CSS to customize the default toast icon color.

/* To change icon color */
.e-toast-container .e-toast .e-toast-icon {
    color: yellow;
}

Customizing the toast background

Use the following CSS to customize the default toast’s background color.

/* To change background color */
.e-toast-container .e-toast {
    background-color: navy;
}