Lightweight JavaScript Notification Message Box Library Plugin

Awesome Notification is a lightweight and fully customizable JavaScript notification library with improved asynchronous support.

awesome notifications, js notification library, jquery notification popup, notifications library, js notification popup, jquery notification bubble, jquery notification message box


  • Modal style notifications.
  • Toast style notifications.
  • Supports HTML content.
  • Confirmation and alert dialogs.
  • Auto rejects after a certain timeout.
  • Countdown progress bar.
  • Font Awesome-based icons.
  • Information/Success/Warning/Alert topics.
  • Asynchronous support.

How to make use of it:

Install and import:

$ npm install awesome-notifications --save
// ES 6
import AWN from 'awesome-notifications';

// CommonJS:
const AWN = require('awesome-notifications');

For the browser, including the Font Awesome and Awesome Notifications stylesheet in the header section of the page.

<link rel="stylesheet" href="">
<link href="dist/style.css" rel="stylesheet">

Include Awesome Notifications JavaScript on the page when needed.

<script src="dist/index.var.js"></script>

Configure the Awesome Notifications library with the default options.

var notifier = new AWN();

Create notification popups using the following JavaScript syntax.

// basic 
notifier.tip('Message here');

// info message'Message here');

// success message
notifier.success('Message here');

// warning message
notifier.warning('Message here');

// alert messages
notifier.alert('Message here');

// confirm dialog
notifier.confirm('Are you sure?', okFunc, cancelFunc);

// modal window with custom css class
notifier.modal('<h2>Your custom title</h2><p>Your custom text</p>', 'custom-class-name')

// async toast
notifier.async(promise, onResolve, onReject, html)

// shows loader and blocks the screen
notifier.asyncBlock(promise, onResolve, onReject, html)

Default options for customizing the notification popup.

maxNotifications: 10,
animationDuration: 300,
position: "bottom-right",
labels: {
  tip: "Tip",
  info: "Info",
  success: "Success",
  warning: "Attention",
  alert: "Error",
  async: "Loading",
  confirm: "Confirmation required",
  confirmOk: "OK",
  confirmCancel: "Cancel"
icons: {
  tip: "question-circle",
  info: "info-circle",
  success: "check-circle",
  warning: "exclamation-circle",
  alert: "exclamation-triangle",
  async: "cog fa-spin",
  confirm: "exclamation-triangle",
  prefix: "<i class='fa fas fa-fw fa-",
  suffix: "'></i>",
  enabled: true
replacements: {
  tip: null,
  info: null,
  success: null,
  warning: null,
  alert: null,
  async: null,
  "async-block": null,
  modal: null,
  confirm: null,
  general: {
    "<script>": "",
    "</script>": ""
messages: {
  tip: "",
  info: "",
  success: "Action has been succeeded",
  warning: "",
  alert: "Action has been failed",
  confirm: "This action can't be undone. Continue?",
  async: "Please, wait...",
  "async-block": "Loading"
formatError(err) {
  if (err.response) {
    if (! return '500 API Server Error'
    if ( {
      return => o.detail).join('<br>')
    if (err.response.statusText) {
      return `${err.response.status} ${err.response.statusText}: ${}`
  if (err.message) return err.message
  return err
durations: {
  global: 5000,
  success: null,
  info: null,
  tip: null,
  warning: null,
  alert: null
minDurations: {
  async: 1000,
  "async-block": 1000

Customizable Notification Popup Library For JavaScript, Awesome Notifications Plugin/Github, jquery notification library

See Demo And Download

Official Website(f3oall): Click Here

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

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…