Growl And Toast Style Alert Notification Library – Notyf

Notyf is a very small and simple-to-use JavaScript library used for display growl- and toast-style alert/success notification messages on the screen. Responsive, accessible and easy to use.

How to use it:

Load the Notyf’s JavaScript and Stylesheet in the html document.

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

Create a new Notyf instance and we’re ready to go.

var notyf = new Notyf();

The JavaScript to show an alert notification.

notyf.alert('Alert Message');

The JavaScript to show a success notification.

notyf.confirm('Success Message');

Possible options.

var notyf = new Notyf({
  // delay time
  // 0 = infinite duration
  duration:2000,
  // enable ripple effect
  ripple: true,
  // custom position
  position: {x:'right',y:'bottom'},
  // allow users to dismiss notifications via button
  dismissible: false, 
  
  types: [
    {
      type: 'warning', // Notification type
      duration: 2000,
      ripple: true,
      message: 'custom message'
      background: 'orange',
      className: '', extra CSS class
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    }
  ]
  
});

Dismiss all notifications.

notyf.dismissAll();

Changelog:

v3.10.0 (06/09/2021)

• Allow icons as HTML markup.

v3.9.0 (07/24/2020)

• Add support for UMD bundles.

v3.8.0 (07/13/2020)

• add icon color option

v3.7.0 (05/09/2020)

• add dismiss functionality for single notification

v3.6.0 (04/07/2020)

• Allow duration=0 to specify infinite duration

v3.5.1 (04/03/2020)

• Fixed compatibility issues with IE11.

v3.5.0 (03/31/2020)

• Replace ‘backgroundColor’ with ‘background’.

v3.4.0 (03/28/2020)

• Allow users to dismiss all notifications

v3.3.0 (03/27/2020)

• Allow users to dismiss notifications via button

v3.2.0 (03/26/2020)

• Allow custom notification positioning

v3.1.0 (10/30/2019)

• Allow multiple class names

v3.0.0 (03/20/2019)

• Improve a11y support with the new a11y announcer
• Implement a more extensible, yet simple and scalable API
• Complete up to date TypeScript typings
• Migrate codebase to TypeScript
• Add appropriate support for module bundlers by exposing different artifacts (ES6, CommonJS, minified IIFE)
• Add e2e tests with Cypress
• Move to Rollup for the build workflow
• Rename delay for duration
• Rename alert for error
• Rename confirm for success
• Remove option confirmIcon
• Remove option alertIcon
• Drop support for Bower

v2.0.1 (05/30/2018)

• Add entry point for CommonJS require. Now Notyf can be imported as var Notyf = require(‘notyf’)