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.

jQuery

JavaScript

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

Angular

TypeScript

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

Vue

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import notify from "devextreme/ui/notify";

export default {
    components: {
        // ...
    },
    methods: {
        showToast() {
            notify("Connection problem", "error", 3000);
        }
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import notify from "devextreme/ui/notify";

class App extends React.Component {
    showToast() {
        notify("Connection problem", "error", 3000);
    }

    render() {
        return (
            {/* ... */} 
        );
    }
}

export default App;

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.

jQuery

JavaScript

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

Angular

TypeScript

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

Vue

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import notify from "devextreme/ui/notify";

export default {
    components: {
        // ...
    },
    methods: {
        showToast() {
            notify({
                message: "Connection problem",
                type: "error",
                displayTime: 3000,
                height: 100
            });
        }
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import notify from "devextreme/ui/notify";

class App extends React.Component {
    showToast() {
        notify({
            message: "Connection problem",
            type: "error",
            displayTime: 3000,
            height: 100
        });
    }

    render() {
        return (
            {/* ... */} 
        );
    }
}

export default App;

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.

jQuery

HTML

JavaScript

<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");
        } 
    });
});

Angular

HTML

TypeScript

<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,
         // ...
     ],
     // ...
 })

Vue

<template>
    <div>
        <DxToast
            :visible.sync="isVisible"
            message="Connection problem"
            type="error"
        />
        <DxButton
            text="Show the Toast"
            @click="onClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxToast } from 'devextreme-vue/toast';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxToast,
        DxButton
    },
    data() {
        return {
            isVisible: false
        };
    },
    methods: {
        onClick() {
            this.isVisible = true;
        }
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Toast } from 'devextreme-react/toast';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isVisible: false
        };

        this.onClick = this.onClick.bind(this);
        this.onHiding = this.onHiding.bind(this);
    }

    onClick() {
        this.setState({
            isVisible: true
        });
    }

    onHiding() {
        this.setState({
            isVisible: false
        });
    }

    render() {
        return (
            <div>
                <Toast
                    visible={this.state.isVisible}
                    message="Connection problem"
                    type="error"
                    onHiding={this.onHiding}
                />
                <Button
                    text="Show the Toast"
                    onClick={this.onClick}
                />
            </div>
        );
    }
}

export default App;

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.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also