jQuery/JS Common - Utils - ui - Methods

hideToasts()

Hides all the Toast components in the application.

import toast 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/toast/hide_toasts';

@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/toast/hide_toasts';

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

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