Intuitive Sliding Toast Notification Library – Toast.js

Preview:

Description:

Toast.js is a lightweight notification library that makes it easy to send immediate, non-intrusive, slide-in toast messages to users.

It allows for an array of predefined styles such as default, success, warning, or danger, and provides the flexibility of incorporating buttons for custom actions.

How to use it:

1. Load the needed JavaScript and CSS files in the document.

<link rel="stylesheet" href="css/Toast.css" />
<script src="js/Toast.js"></script>

2. Create toast messages.

// Default
new Toast({
    message: 'Default Message'
});
// Danger
new Toast({
    message: 'Dange Message',
    type: 'danger'
});
// Warining
new Toast({
    message: 'Warning Message',
    type: 'warning'
});
// Success
new Toast({
    message: 'Success Message',
    type: 'success'
});

3. Add custom action buttons to the toast messages.

new Toast({
    message: 'Toast Messages with custom buttons',
    type: 'success',
    customButtons: [
    {
      text: 'Button 1',
      onClick: function() {
        //  do something
      }
    },
    {
      text: 'Button 2',
      onClick: function() {
        //  do something
      }
    },
    // more buttons
  ]
});