Free Trial Buy
    Your search did not match any results.
    Toast

    Overview

    The Toast is a UI component that displays pop-up notifications.

    When you need to display a notification, call the notify(message, type, displayTime) method with values for the message, type, and displayTime properties passed as arguments.

    You can specify one of the four predefined types of notifications, depending on the mood of the message:

    • 'info'
      A blue toast with a message bubble icon.

    • 'warning'
      A yellow toast with an exclamation mark icon.

    • 'error'
      A red toast with an X icon.

    • 'success'
      A green toast with a check mark icon.

    In this demo, toggle check boxes to see the 'success' and 'error' notification types.

    You can also customize the Toast appearance. Set the type property to 'custom' and use a contentTemplate. Refer to the following topic for more information: Customize the Content.

    If you need to specify other Toast properties in addition to type and displayTime, call the notify(options, type, displayTime) method and pass an object as the argument. In this object, you can set any Toast property, such as shading, position, width, height, and others.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.products = products; $scope.checkAvailable = function (data) { const type = data.value ? 'success' : 'error'; const productName = data.element.parent().find('#name').text(); const text = productName + (data.value ? ' is available' : ' is not available'); DevExpress.ui.notify(text, type, 600); }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="toast"> <h1>Product List</h1> <ul> <li ng-repeat="product in products"> <img ng-src="{{product.ImageSrc}}" /> <div id="name">{{product.Name}}</div> <div dx-check-box="{ text: 'Available', onValueChanged: checkAvailable }" ></div> </li> </ul> </div> </div> </body> </html>
    #toast { padding: 10px; } #toast ul { text-align: center; list-style-type: none; margin: 20px 0; } #toast ul li { display: inline-block; width: 160px; margin: 10px; } #toast ul li img { width: 100px; } .dx-toast-content { min-width: 300px; max-width: 400px; }
    const products = [{ ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: '../../../../images/products/4.png', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/5.png', }, { ID: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/6.png', }, { ID: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: '../../../../images/products/7.png', }];