Toast-style Web Notifications In Vanilla JavaScript – VanillaToasts

Category: Javascript , Notification | April 17, 2020
Views Total:3,130 views
Official Page:Go to website
Last Update:April 17, 2020


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 

  // executed when toast is clicked
  callback: function() { ... } 


Hide the toast notification manually.


Set the timeout.

VanillaToasts.setTimeout(, 2000);


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