Displaying Alerts, Popups with Customizable Features | Toastifier

Toastifier is a simple, lightweight, and easy-to-use npm package for displaying alerts and popups with some customizable features like animation, theme, style, etc. Toastifier is a popup JavaScript library inspired by Material Toasts. It can be used with any framework/library built with JS.

customize javascript alert box css, javascript alert box formatting, toast notification jquery, jquery alert message, attractive alert box in javascript, html tags in javascript alert box


  • Automatic rejection
  • 4 types of alerts: error, success, warning, information.
  • 4 fancy animations: flip, bounce, fade-in, zoom in / out.
  • Pause the countdown timer when hovering over the mouse.
  • OnClick function.
  • Custom patterns.
  • With or without icons.

How to make use of it:

1. Install and import the Toastifier.

# Yarn
$ yarn add toastifier

$ npm i toastifier
import 'toastifier/dist/toastifier.min.css';
import toastifier from 'toastifier';

2. Show a fundamental alert popup on the display screen.

toastifier('Basic Alert');

3. Set the notification type:

toastifier('Alert Message Here',{
  type: 'warn'

4. Set the animation type:

toastifier('Alert Message Here',{
  animation: 'flip'

5. Set the position of the alert popups.

toastifier('Alert Message Here',{
  position: 'top-left'

6. Set the duration of the animation.

toastifier('Alert Message Here',{
  duration: 5000

7. Determine whether or not to pause the countdown timer on hover.

toastifier('Alert Message Here',{
  onhoverPause: true

8. Determine whether or not to indicate the icon within the alert popup.

toastifier('Alert Message Here',{
  showIcon: true

9. Trigger a function when the user clicks the alert popup.

toastifier('Alert Message Here',{
  onClick: function(){
    // ...

10. More choices to customize the alert popups.

toastifier('Alert Message Here',{

  // additional CSS rules here
  styleClass: {},

  // background color
  background: '#222'

  // text color
  text: '#fff'

  // border property
  border: '1px solid #222',

  // show box shadow
  shadow: true,

Simple Alert Popup, Toastifier Plugin/Github, show message instead of alert in javascript, custom alert javascript


See Demo And Download

Official Website(varun-singhh): Click Here

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

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…