Create Custom Toast Notifications In Vanilla JavaScript – Toastada

Category: Javascript , Notification | September 25, 2018
Views Total:1,479 views
Official Page:Go to website
Last Update:September 25, 2018


Create Custom Toast Notifications In Vanilla JavaScript – Toastada


Toastada is a vanilla JavaScript notification plugin that provides a simple way to display customizable toast messages on the web page. By default, the toast notifications will auto-dismiss after 4 seconds, with a configurable sliding effect.


npm install --save toastada

How to use it:

Import the main JavaScript file into the webpage:

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

Create toast messages using the following JS syntax.


The primary toast stylings.

/* Entire toast container */
.toast-container {
  position: fixed;
  z-index: 999999999;
  max-width: 300px;
  /*min-width: 300px;*/
/* Each toast gets this style */
.toast {
  /*width: 300px;*/
  font-family: "helvetica neue";
  font-weight: 200;
  letter-spacing: 2px;
  opacity: 1;
  position: relative;
  right: 0;
  color: white;
  background: rgba(50,50,50,.9);
  padding: 20px;
  margin-bottom: 8px;
  border-radius: 3px;
  transition: .3s all ease;
.toast.toast-exit {
  transition: .4s all ease;
  transform: translate3d(0,0,0);
  right: -300px;
  opacity: 0;

Custom notification styles.

/* Successful toast class */
.toast-success {
  background: rgba(126,211,33,.9);
  box-shadow: 0 5px 15px rgba(126,211,33,.5);
.toast-info {
  background: rgba(0,50,250,.9);
  box-shadow: 0px 5px 15px rgba(0,50,250,.5);
/* Error toast class */
.toast-error {
  background: rgba(191,36,58,.9);
  box-shadow: 0 5px 15px rgba(191,36,58,.5);
/* Warn toast class */
.toast-warn {
  background: rgba(245,166,35,.9);
  box-shadow: 0 5px 15px rgba(245,166,35,.5);

More configuration options.

toastada.success('Success!', {
  prependTo: document.body.childNodes[0],
  lifeSpan: 4000, // timeout
  position: 'top-right',
  animate: false, // enable animation
  animateDuration: 0



  • Update JS

You Might Be Interested In:

Leave a Reply