All docs
V22.1
22.1
21.2
The page you are viewing does not exist in version 21.2. This link will take you to the root page.
21.1
The page you are viewing does not exist in version 21.1. This link will take you to the root page.
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Methods

hideToasts()

Hides all the Toast components in the application.

import ToastHideToasts from "devextreme/ui/toast/hide_toasts"

The code below uses a Button to hide all the Toast components on click.

jQuery
index.html
index.js
<div id="hide"></div>
$("#hide").dxButton({
    text: "Hide all Toasts",
    onClick() {
        DevExpress.ui.hideToasts();
    }
});
Angular
app.component.html
app.component.ts
<dx-button
    text="Hide all Toasts"
    (onClick)="onClick($event)"
>
</dx-button>
import { Component } from '@angular/core';
import hideToasts from 'devextreme/ui/hideToasts';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onClick() {
        hideToasts();
    }
}
Vue
App.vue
<template>
    <DxButton
        text="Hide all Toasts"
        @click="onClick"
    />
</template>

<script>
    import { DxButton } from 'devextreme-vue/button';
    import hideToasts from 'devextreme/ui/hideToasts';

    export default {
        methods: {
            onClick() {
                hideToasts();
            }
        }
    }
</script>
React
App.js
import React from 'react';
import { Button } from 'devextreme-react/button';
import hideToasts from 'devextreme/ui/hideToasts';

function App() {
    const onClick = () => { 
        hideToasts();
    }
    return (
        <Button 
            text="Hide all Toasts"
            onClick={onClick}
        />
    );
}
export default App;