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.

myToast.showToast();

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,

})

Changelog:

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