Tiny Google Inspired Toast Library With Vanilla JavaScript – ToastController.js

Category: Image | September 22, 2018
Views Total:93 views
Official Page:Go to website
Last Update:September 22, 2018


Tiny Google Inspired Toast Library With Vanilla JavaScript – ToastController.js


ToastController.js is a dependency-free vanilla JavaScript library that lets you create Google Material Design-inspired toast notifications with custom messages and icons for your web applications.


Load the stylesheet toast-controller.css and JavaScript file toast-controller.js in your document.

<link rel="stylesheet" href="toast-controller.css">
<script src="ToastController.js"></script>

Open a new Toast based on the configuration data passed in as a map.

  • {string} config.name: the name of the Toast, to be used to reference it later
  • {string} config.text: the text to display inside the Toast
  • {string} config.icon: the icon to display on the left side of the toast
  • {string} config.className: additional class that will be added to the Toast’s classes
  • {ToastPriority} config.priority: the level of priority that the Toast has, out of two possible priorities: ToastPriority.HIGH or ToastPriority.LOW
  text: "Hello World!" 

Close the toast message.


Customize the toast message via SASS or LESS.

$toast_offset_left: 5px !default;
$toast_offset_bottom: 5px !default;
$toast_mobile_cutoff: 320px !default;
$toast_font_size: 16px !default;
$toast_font_size_mobile: $toast_font_size + 2px !default;
$toast_mobile_style_change: true !default;
// Colors
$toast_success_color: #4CAF50 !default;
$toast_error_color: #F44336 !default;
$toast_warn_color: #FFC107 !default;



  • Fixed toast positioning on mobile

You Might Be Interested In:

Leave a Reply