Open navigation
Documentation See also iziModal.js


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

Star Download

A plugin for perky developers.


All modern browsers are supported. (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).

Bugs? create a issue here.

1.1.2 (beta)

  • new FontSize and LineHeight options for title and message - Implemented

  • new maxWidth option - Implemented

  • new CustomEvent polyfill - Implemented

  • bug Incompatibility with iziModal animations - Fixed

  • bug RTL alignments - Fixed

  • bug Balloon Toast arrow color does not change when a background is set. - Fixed

1.1.0 / 1.1.1

  • new Drag/Touch support - Implemented

  • new ClosedBy param ('drag' or 'button') - Implemented

  • new Targetfirst option - Implemented

  • new Background & message color options - Implemented

  • new Write HTML elements in toast messages - Implemented

  • bug Leap in animation when used Target - Fixed

  • bug zIndex, unexpected behavior - Fixed

  • bug box-shadow of balloon toast with progressbar not applied correctly - Fixed


  • new Original stylus source files - Implemented

  • new Folder structure - Modified

  • new Larger zIndex and Option to set it - Implemented

  • bug Flip animation - Fixed

  • bug Wrong positioning of internal elements - Fixed


  • new Internet Explorer 10+ support - Implemented



                        npm install izitoast --save


                        bower install izitoast

HTML › Include the CSS files from the dist folder in the head section:


HTML › Include the JS file before the scripts


JS › Basic example

                            title: 'Hey',
                            message: 'What would you like to add?'

ICONS › Tested and recommended

One need only incorporate the CSS of icons and use the corresponding class.


Default Options (38)

                            class: '',
                            title: '',
                            titleColor: '',
                            titleSize: '',
                            titleLineHeight: '',
                            message: '',
                            messageColor: '',
                            messageSize: '',
                            messageLineHeight: '',
                            backgroundColor: '',
                            color: '', // blue, red, green, yellow
                            icon: '',
                            iconText: '',
                            iconColor: '',
                            image: '',
                            imageWidth: 50,
                            maxWidth: null,
                            zindex: null,
                            layout: 1,
                            balloon: false,
                            close: true,
                            rtl: false,
                            position: '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 () {}

Default value
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.
titleSize new '' Title fontSize.
titleLineHeight new '' Title lineHeight.
message '' Message of notification.
messageColor '' Message color.
messageSize new '' Message fontSize.
messageLineHeight new '' Message lineHeight.
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. Example
imageWidth 50 Width of cover image. Example 100px
maxWidth new null set maxWidth of toast. Example 500px
zindex 99999 The z-index CSS attribute of the toast
layout 1 Example Small e Example Medium. It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloon false Applies a balloon like toast. Example.
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. Example
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. Example
resetOnHover false Reset the toast timeout while the cursor is on it. Example
progressbar true Enable timeout progress bar.
progressbarColor '' Progress bar color.
animateInside true Enable animations of elements in the toast. Example True and Example False.
buttons {} You can specify an array of buttons. Example
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.



is used to set default values.

                            timeout: 10000,
                            resetOnHover: true,
                            icon: 'material-icons',
                            transitionIn: 'flipInX',
                            transitionOut: 'flipOutX',
                            onOpen: function(){
                                console.log('callback abriu!');
                            onClose: function(){
                                console.log("callback fechou!");


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: [
                                ['', function (instance, toast) {
                                    alert("Hello world!");
                                ['', function (instance, toast) {
                                        transitionOut: 'fadeOutUp',
                                        onClose: function(instance, toast, closedBy){
                                  'closedBy: ' + closedBy); //btn2
                                    }, toast, 'close', 'btn2');
                            onOpen: function(instance, toast){
                      'callback abriu!');
                            onClose: function(instance, toast, closedBy){
                      'closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'


Closes the specific toast.

                        var toast = document.querySelector('.toast');

                            transitionOut: 'fadeOutUp'
                        }, toast);


Destroy all toasts.


You can use four predefined types that have icon and different colors.


                            title: 'Hello',
                            message: 'Welcome!',


                            title: 'OK',
                            message: 'Successfully inserted record!',


                            title: 'Caution',
                            message: 'You forgot important data',


                            title: 'Error',
                            message: 'Illegal operation',



Capture when the toast is opening.

                        document.addEventListener('iziToast-open', function(data){
                            if(data.detail.class == 'test'){
                                console.log('test open');


Capture when the toast is closing.

                        document.addEventListener('iziToast-close', function(data){
                            if(data.detail.class == 'test'){
                                console.log('test close');

Made with by Marcelo Dolce.

Did you like it? Help to keep iziToast development alive.