Toast-like Alert & Confirmation Popup Library – Noty.js

Preview:

Description:

Noty.js is a tiny and easy-to-use JavaScript notification library for creating toast-like alert popups and confirmation dialogs with cool CSS3 animations.

How to use it:

1. Download and load the Noty.js JavaScript library.

<link rel="stylesheet" href="./dist/noty.min.css" />
<script src="./dist/noty.js"></script>

2. Create a new instance of the Noty.

const noty = new Noty({
      // options here
});

3. Create Default/Success/Warning/Error alerts.

noty.push({
  text: "I am a default message",
  timeout: 4000,
});
noty.push({
  title: "Success",
  type: "success",
  text: "I am a success message with title",
  timeout: 4000,
});
noty.push({
  type: "warning",
  text: "I am a warning message",
  timeout: 4000,
});
noty.push({
  type: "error",
  text: "I am an error message",
  timeout: 4000,
  clickClose: false,
});

4. Create a confirm dialog with custom buttons.

noty.push({
  text: 'Confirmation text',
  buttons: {
    ok: {
      text: "OK",
      close: true,
      action: function () {
        alert('OK button clicked');
      },
      classname: "your-css-class",
    },
    close: {
      text: 'Close',
      close: true,
      action: function () {
        alert('Close button clicked');
      },
      classname: "your-css-class",
    },
  }
});

5. Available parameters to config the notifications

const noty = new Noty({
      // pause on hover
      hoverPause: false,
      // auto-dismiss after this timeout
      timeout: 0,
      // top, right-top, right, right-bottom, 
      // bottom, left-bottom, left, left-top
      position: "right-bottom",
      // slide-bottom, slide-right, fade, flip, zoom
      animation: "slide-right fade flip zoom",
      
});