Action buttons in EJ2 JavaScript Toast control

29 Aug 20233 minutes to read

You can include action buttons to the toast control by adding the buttons property. The collection of Essential JS 2 button models can be bound to the model property inside the buttons property. You can also include the click event callback function for each button.

ej.base.enableRipple(true);

//Initialize Toast component
var toast = new ej.notifications.Toast({
  title: 'Anjolie Stokes',
  content: 'Thanks for the update!',
  icon: 'e-laura',
  position: { X: "Right", Y: "Bottom" },
  width: 280,
  height: 120,
  buttons: [{
        model: { content: "Ignore" }, click: btnClick
    }, {
        model: { content: "reply" }
    }]
});
//Render initialized Toast component
toast.appendTo('#elementToastTime');
toast.show();

document.getElementById('show_toast').onclick = function () {
  toast.show();
};

function btnClick(e) {
  var toastEle = ej.base.closest(e.target, '.e-toast');
  toast.hide(toastEle);
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/material.css" rel="stylesheet">
    
    
<style>
.e-toast-icon.e-laura.e-icons {
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://ej2.syncfusion.com/vue/demos/src/toast/resource/laura.png);
    height: 44px !important;
    margin: 0;
    width: 60px;
}
#elementToastTime .e-toast-message {
    padding: 10px;
}
</style><script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row"> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id="element"></div>
        <div id="elementToastTime"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also