Minimalistic and Responsive JavaScript Library for Show Toast Notifications | Notyf

Notyf is a minimalistic JavaScript library for toast notifications. It’s responsive, A11Y compatible, dependency-free, and small in size (~3KB). Easy integration with React, Angular, Aurelia, Vue, and Svelte.


  • 📱 Responsive
  • 👓 Compatible with A11Y
  • 🔥 Strongly written source code (TypeScript is readily available)
  • ⚡️ 4 types of packages were exposed: ES6, CommonJS, UMD, and IIFE (for vanilla use without framework).
  • 🎯 Comprehensive testing with Cypress
  • 🎸 Easily pluggable into modern frameworks. Recipes are available for integration with React, Angular, Aurelia, Vue, and Svelte.
  • ✨ Fancy ripple-like detection effect
  • 😈 Simple but highly extensible API. Create and customize your own toasts.
  • 🎃 Support for rendering custom HTML content inside the toast
  • 🐣 Small footprint (<3K compressed)
  • 👴🏽 Works on IE11

Must Read: Pure Javascript Toast Notifications Message Library | Buzz Notify

How to make use of it:


npm i notyf


    <link rel="stylesheet" href="">
    <script src=""></script>
// Create an instance of Notyf
var notyf = new Notyf();

// Display an error notification
notyf.error('You must fill out the form before moving forward');

// Display a success notification
notyf.success('Your changes have been successfully saved!');


You can set some options when creating a Notyf instance.

new Notyf(options: INotyfOptions)

Must Read: 🥖 A Simple and Flexible Stacking Toast Style Notifications In Vue.js

durationnumber2000Number of milliseconds before hiding the notification. Use 0 for an infinite duration.
ripplebooleantrueWhether to show the notification with a ripple effect
positionINotyfPosition{x:'right',y:'bottom'}Viewport location where notifications are rendered
dismissibleboolean falseWhether to allow users to dismiss the notification with a button
typesINotyfNotificationOptions[]Success and error toastsArray with individual configurations for each type of toast



Viewport location where notifications are rendered.

xleft | center | rightx-position
ytop | center | bottomy-position


Configuration interface for each individual toast.

Must Read: Create Toaster Notifications with a Few Lines of Code | ToasterJS

typestringNotification type for which this configuration will be applied
classNamestringCustom class name to be set in the toast wrapper element
iconstring INotyfIcon falseEither a string with HTML markup, an object with the properties of the icon, or ‘false’ to hide the icon
backgroundstringThe background color of the toast
messagestringMessage to be rendered inside of the toast. Becomes the default message when used in the global config.
ripplebooleanWhether or not to render the ripple at revealing
dismissiblebooleanWhether to allow users to dismiss the notification with a button


Icon configuration

classNamestringCustom class name to be set in the icon element
tagNamestringHTML5 tag used to render the icon
textstringInner text rendered within the icon (useful when using ligature icons)
colorstringIcon color. It must be a valid CSS color value. Defaults to the background color.

See Also –

Jquery Plugin for Animated and Customizable Alert Notifications | Nice Toast JS
Programmatic Toasts for Nuxt.js Based On Tailwind CSS
Simple and Easy Toast Notification Popup With JavaScript

See Demo And Download

Official Website(caroso1222): Click Here

This superior jQuery/javascript plugin is developed by caroso1222. For extra Advanced Usage, please go to the official website.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Leave a Reply

Your email address will not be published. Required fields are marked *