Search results

Style and appearance in Vue Toast component

22 Sep 2021 / 1 minute to read

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.

Copied to clipboard
/* 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.

Copied to clipboard
/* 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.

Copied to clipboard
/* 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.

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