Toast-style Web Notifications In Vanilla JavaScript – VanillaToasts

Category: Javascript , Notification | March 3, 2022
Views Total:2,086 views
Official Page:Go to website
Last Update:March 3, 2022


Toast-style Web Notifications In Vanilla JavaScript – VanillaToasts


VanillaToasts is a lightweight and easy-to-use vanilla JavaScript library for displaying toast-style notifications on your website / web application.

Currently supports 4 different types of notifications: success, info, warning, and error.

How to use it:

Import the vanillatoasts.css and vanillatoasts.js into your webpage.

<script src="vanillatoasts.js"></script>
<link href="vanillatoasts.css" rel="stylesheet"></script>

Create a default toast message that slides out from the right side of your webpage.

  title: 'Message Title',
  text: 'Notification text',

Optional parameters.

  // notification title
  title: 'Welcome to my site',
  // notification message
  text: 'This toast will hide after 5000ms or when you click it',
  // success, info, warning, error   / optional parameter
  type: 'warning', 
  // path to notification icon
  icon: '/img/alert-icon.jpg',
  // topRight, topLeft, topCenter, bottomRight, bottomLeft, bottomCenter
  positionClass: 'bottomLeft',
  // auto dismiss after 5000ms
  timeout: 5000,
  // hide any other toasts, keeping only the latest visible
  single: true,
  // executed when toast is clicked
  callback: function() { ... } 

Hide the toast notification manually.


Set the timeout.

VanillaToasts.setTimeout(, 2000);


v1.5.0 (03/03/2022)

  • Added a single boolean option that will hide any other toasts, keeping only the latest visible.
  • Added an onHide function option that will run whenever the toast gets hidden

v1.4.0 (04/17/2020)

  • add support for positioning the toast
  • fixed no mouse events in toast container


  • Added vanillatoast id infront of generic h4 rule to avoid normal page h4 tags getting unintended styling applied
  • New function to manually begin the timeout of a toast which was created without a timeout option

You Might Be Interested In:

Leave a Reply