DevExtreme jQuery - Overview

The Toast is a widget that provides pop-up notifications.

View Demo

The Toast widget does not need to be created on the page before it can be shown. You can simply call the notify(message, type, displayTime) method with values for the message, type and displayTime options passed as the arguments.

DevExpress.ui.notify("Connection problem", "error", 3000)

import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    showToast() {
        notify("Connection problem", "error", 3000);
    }
}
@NgModule({
     imports: [
         // ...
     ],
     // ...
 })

If you need to specify other Toast options, call the same method, but this time pass an object as the argument. In this object, you can set any Toast option.

DevExpress.ui.notify({
    message: "Connection problem",
    type: "error",
    displayTime: 3000,
    height: 100
});

import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    showToast() {
        notify({
            message: "Connection problem",
            type: "error",
            displayTime: 3000,
            height: 100
        });
    }
}
@NgModule({
     imports: [
         // ...
     ],
     // ...
 })

If you are going to reuse the Toast, then create it on the page using the following code. Note that in this code, the Button widget invokes the Toast.

<div id="toastContainer"></div>
<div id="buttonContainer"></div>

$(function() {
    $("#toastContainer").dxToast({
        message: "Connection problem",
        type: "error"
    });

    $("#buttonContainer").dxButton({
        text: "Show the Toast", 
        onClick: function () {
            $("#toastContainer").dxToast("show");
        } 
    });
});

<dx-toast
    [(visible)]="isVisible"
    type="error"
    message="Connection problem">
</dx-toast>
<dx-button
    text="Show the Toast"
    (onClick)="isVisible = true">
</dx-button>

import { DxButtonModule, DxToastModule } from "devextreme-angular";
// ...
export class AppComponent {
    isVisible: boolean = false;
}
@NgModule({
     imports: [
         DxButtonModule,
         DxToastModule,
         // ...
     ],
     // ...
 })

The appearance of the Toast is predefined by its type. Depending on the mood of the message that the Toast displays, the type can be "info", "warning", "error" or "success". There is also the "custom" type that allows you to define a custom appearance for the Toast. Find more information about this in the Customize the Content article.

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Toast - Show and Hide
• Toast - Customize the Content
• Toast - Resize and Relocate
• Toast API Reference