node package manager



Elegant, responsive, flexible and lightweight notification plugin with no dependencies.


Fast Responsive Animated Lightweight Customizable No dependencies Retina
alt text alt text alt text alt text alt text alt text alt text
  • All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).
  • Bugs? create an issue here.

Version Log

  • v1.1.0

    • alt text Drag/Touch support - Implemented.
    • alt text ClosedBy param ('drag' or 'button') - Implemented.
    • alt text Targetfirst option - Implemented.
    • alt text Background & message color options - Implemented.
    • alt text Write HTML elements in toast messages. - Implemented.
    • alt text Leap in animation when used Target - Fixed.
    • alt text zIndex, unexpected behavior - Fixed.
    • alt text box-shadow of balloon toast with progressbar not applied correctly - Fixed.
  • v1.0.2

    • alt text Original stylus source files - Implemented.
    • alt text Folder structure - Modified.
    • alt text Larger zIndex and Option to set it - Implemented.
    • alt text Flip animation - Fixed.
    • alt text Wrong positioning of internal elements - Fixed.
  • v1.0.1

    • alt text Internet Explorer support - Implemented.



npm install izitoast --save


bower install izitoast --save

Default Options{
    class: '',
    title: '',
    titleColor: '',
    message: '',
    messageColor: '',
    backgroundColor: '',
    color: '', // blue, red, green, yellow 
    icon: '',
    iconText: '',
    iconColor: '',
    image: '',
    imageWidth: 50,
    zindex: 99999,
    layout: 1,
    balloon: false,
    close: true,
    rtl: false,
    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center 
    target: '',
    targetFirst: true,
    timeout: 5000,
    drag: true,
    pauseOnHover: true,
    resetOnHover: false,
    progressBar: true,
    progressBarColor: '',
    animateInside: true,
    buttons: {},
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOut',
    transitionInMobile: 'fadeInUp',
    transitionOutMobile: 'fadeOutDown',
    onOpen: function () {},
    onClose: function () {}
Argument Default Value Description
class '' The class that will be applied to the toast. It may be used as a reference.
title '' Title of the toast.
titleColor '' Title color.
message '' Message of the toast.
messageColor '' Message color.
backgroundColor '' Background color of the Toast.
color '' It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name".
icon '' Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).
iconText '' Icon text (font-icon using text, Material Icons, etc.).
iconColor '' Icon color.
image '' Cover image.
imageWidth 50 Width of cover image.
zindex 99999 The z-index CSS attribute of the toast.
layout 1 It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloon false Applies a balloon like toast.
close true Show "x" close button.
rtl false RTL option.
position 'bottomRight' Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.
target '' Fixed place where you want to show the toasts.
targetFirst true Add toast to first position
timeout 5000 Amount in milliseconds to close the toast or false to disable.
drag true Drag Feature. Is used to close the toast.
pauseOnHover true Pause the toast timeout while the cursor is on it.
resetOnHover false Reset the toast timeout while the cursor is on it.
progressbar true Enable timeout progress bar.
progressbarColor '' Progress bar color.
animateInside true Enable animations of elements in the toast.
buttons {} You can specify an array of buttons.
transitionIn 'fadeInUp' Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.
transitionOut 'fadeOut' Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile 'fadeInUp' Default toast opening mobile transition.
transitionOutMobile 'fadeOutDown' Default toast closing mobile transition.
onOpen function () {} Callback function triggered when open the toast.
onClose function () {} Callback function triggered when close the toast.


  • Settings - is used to set default values.
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX'
  • Show - Opens the toast. (Example with buttons).{
    color: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter 
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOutUp' }, toast);
    onOpen: function(instance, toast){'callback abriu!');
    onClose: function(instance, toast, closedBy){'closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button' 
  • Hide - Closes the specific toast.
var toast = document.querySelector('.toast');
    transitionOut: 'fadeOutUp'
}, toast);
  • Destroy - Destroy all toasts.
  • Info{
    title: 'Hello',
    message: 'Welcome!',
  • Success
    title: 'OK',
    message: 'Successfully inserted record!',
  • Warning
    title: 'Caution',
    message: 'You forgot important data',
  • Error
    title: 'Error',
    message: 'Illegal operation',


  • Open - Capture when the toast is opening.
document.addEventListener('iziToast-open', function(data){
    if(data.detail.class == 'test'){
        console.log('test open');
  • Close - Capture when the toast is closing.
document.addEventListener('iziToast-close', function(data){
    if(data.detail.class == 'test'){
        console.log('test close');