Growl And Toast Style Alert Notification Library – Notyf

Category: Javascript , Notification , Recommended | June 9, 2021
Views Total:2,312 views
Official Page:Go to website
Last Update:June 9, 2021


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
  // 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.



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’)

You Might Be Interested In:

Leave a Reply