Simple Vanilla JavaScript Toast Notification Library – Toastify

Category: Javascript , Notification | July 21, 2022
Views Total:5,889 views
Official Page:Go to website
Last Update:July 21, 2022


Simple Vanilla JavaScript Toast Notification Library – Toastify


Toastify is a simple, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end-users.

How to use it:

Import the main JavaScript file ‘toastify.js’ into the html document.

<script src="src/toastify.js"></script>

Create a basic toast message and specify the duration in milliseconds to hide the notification.

var myToast = Toastify({
 text: "This is a toast message",
 duration: 5000

You are also allowed to load messages from a DOM node.

var myToast = Toastify({
 node: elementNode,
 duration: 5000

Show the toast message. In this example, the toast message will auto dismiss after 5 seconds.


The default CSS for the toast message. Copy and paste the CSS styles as displayed below into your web page.

.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  top: -150px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
.toastify.on { opacity: 1; }

Specify the container in which you want to display the toast message.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  selector: '#container'

Execute a callback function as you click on the toast message.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  onClick: function(){}

Execute a callback function after the toast message is dismissed.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  callback: function(){}

More configuration options.

myToast = Toastify({
  // On-click destination
  destination: null,
  // Open destination in new window
  newWindow: false,
  // Show toast close icon
  close: false,
  // Toast position - top or bottom
  gravity: 'bottom',
  // Toast position - left or right
  positionLeft: false,
  position: 'left',
  // Avatar
  avatar: "",
  // Additional classes for the toast
  classeName: ""
  // Prevents dismissing of toast on hover
  stopOnFocus: true,
  // Toast offset
  offset: { x: 0, y: 0 },
  //  Toggle the default behavior of escaping HTML markup
  escapeMarkup: true,
  // custom CSS styles here
  style: {},
  // set the order in which toasts are stacked in page
  oldestFirst: true,


v1.12.0 (07/21/2021)

  • Accessibility fix: Support aria-live for the toast
  • Accessibility fix: Add aria-label for close icon

v1.11.2 (10/07/2021)

  • Bugfix: Style Options: backgroundColor not working
  • Bugfix: ShadowRoot is undefined in older browsers

v1.11.1 (07/15/2021)

  • Bugfix: IE11 support broke since style option

v1.11.0 (04/25/2021)

  • New property oldestFirst allows to set the order of adding new toasts to page

v1.10.0 (03/26/2021)

  • selector now supports a DOM Node, along with ID string
  • New property – escapeMarkup – Toggle the default behavior of escaping HTML markup
  • New property – style – Use the HTML DOM Style properties to add any style directly to toast
  • Adds toastify-es.js, to be used from node_modules until there are no compatibility issues
  • backgroundColor is deprecated. Use style.background instead

v1.9.3 (10/09/2020)

  • Offset IE11 compatibility

v1.9.2 (09/25/2020)

  • Bugfix: Max width problem for firefox browser

v1.9.1 (08/14/2020)

  • Add support for providing toast offset
  • Bugfix: Avatar positioning based on toast position

v1.9.0 (07/23/2020)

  • Add support for providing toast offset

v1.8.0 (05/30/2020)

  • Add option to provide a node instead of text

v1.7.0 (03/02/2020)

  • To be able to set stopOnFocus for toasts without close icon
  • Bugfix: duration can be infinite by setting as 0
  • Bugfix: Prevent errors when parent node is removed from DOM while using frameworks
  • Bugfix: IE 9/10 compatibility fix

v1.6.2 (01/03/2020)

  • Bugfix: Closing the toast when custom close icon from icon fonts are used

v1.6.1 (06/30/2019)

  • Deprecation Warning: Migrating from positionLeft property to position – positionLeft is still supported but may be removed in future versions
  • Property position to support center as a value along with left and right – Useful for centering toast messages in the page
  • Bugfix: Disabling stopOnFocus

v1.5.0 (05/30/2019)

  • Added support for persistent toast, and ability to dismiss the toast programatically.

v1.4.0 (05/12/2019)

  • Manually import CSS while using as module in your modern JavaScript applications.
  • Ability to pause the toast dismiss timer on hover (Using stopOnFocus property)

v1.3.2 (12/07/2018)

  • Added z-index attribute.

v1.3.1 (10/09/2018)

  • prevents to use !important when overwriting .toastify background color with custom CSS
  • Update classnames inside media query

v1.2.1 (05/31/2018)

  • Added support for Classes. Now custom classes can be added to the toast while creating it.

v1.2.0 (05/25/2018)

  • Fix issue when destination and close options is used at the same time
  • Add support for custom classes

You Might Be Interested In:

One thought on “Simple Vanilla JavaScript Toast Notification Library – Toastify

Leave a Reply