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 or suggestions for improvements? create a issue here.

1.4.0 (Updated on Aug 6, 2018)

  • new iconUrl option - Implemented

  • new displayMode option - Implemented

  • new Dynamic id generator - Implemented

  • new TypeScript Interfaces - Updated

  • bug Destroy method - Fixed

  • bug RTL mode + layout2 / Issue #131 - Fixed


  • new closeOnClick option - Implemented

  • new Inputs option - Implemented

  • new Html structure improving - Implemented

  • bug TypeScript Interfaces - Fixed

  • bug Issue #97 - Fixed

  • bug Progress control / Issue #108 - Fixed


  • new Question type - Implemented

  • new Progress Bar improving (FPS optimizations) - Implemented

  • new progressBarEasing option - Implemented

  • new overlay, overlayClose and overlayColor options - Implemented

  • new closeOnEscape option - Implemented

  • new Progress Bar methods (start, reset, pause and resume) - Implemented

  • new TypeScript Interfaces - Implemented

  • new Gulpfile - Added

  • bug Timeout with pauseOnHover and resetOnHover cannot be used without progressBar - Fixed

  • bug Timeout for displaying each internal button - Fixed


  • new Html structure improving - Implemented

  • bug Css min height of toast - Fixed

  • bug Corrected nomenclature in new event function - Fixed

  • bug Condition of showing progress bar or not - Fixed


  • bug Progress Bar resetOnHover - Fixed

1.1.2 / 1.1.3

  • new toastOnce option - Implemented

  • new Info Icon and icons for the Dark theme - Implemented

  • new Theme option (light or dark) - Implemented

  • new options onOpening, onOpened, onClosing and onClosed - Implemented

  • new Listeners iziToast-opening/opened/closing/closed - Implemented

  • new id option - Implemented

  • new maxWidth option - Implemented

  • new Multiple classes in the option - Implemented

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

  • new Improvements in Listener iziToast-opening/opened/closing/closed (ClosedBy and all other toast settings) - 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 - Updated

  • 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 (52)

                            id: null, 
                            class: '',
                            title: '',
                            titleColor: '',
                            titleSize: '',
                            titleLineHeight: '',
                            message: '',
                            messageColor: '',
                            messageSize: '',
                            messageLineHeight: '',
                            backgroundColor: '',
                            theme: 'light', // dark
                            color: '', // blue, red, green, yellow
                            icon: '',
                            iconText: '',
                            iconColor: '',
                            iconUrl: null,
                            image: '',
                            imageWidth: 50,
                            maxWidth: null,
                            zindex: null,
                            layout: 1,
                            balloon: false,
                            close: true,
                            closeOnEscape: false,
                            closeOnClick: false,
                            displayMode: 0, // once, replace
                            position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            target: '',
                            targetFirst: true,
                            timeout: 5000,
                            rtl: false,
                            animateInside: true,
                            drag: true,
                            pauseOnHover: true,
                            resetOnHover: false,
                            progressBar: true,
                            progressBarColor: '',
                            progressBarEasing: 'linear',
                            overlay: false,
                            overlayClose: false,
                            overlayColor: 'rgba(0, 0, 0, 0.6)',
                            transitionIn: 'fadeInUp',
                            transitionOut: 'fadeOut',
                            transitionInMobile: 'fadeInUp',
                            transitionOutMobile: 'fadeOutDown',
                            buttons: {},
                            inputs: {},
                            onOpening: function () {},
                            onOpened: function () {},
                            onClosing: function () {},
                            onClosed: 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 '' Title fontSize.
titleLineHeight '' Title lineHeight.
message '' Message of notification.
messageColor '' Message color.
messageSize '' Message fontSize.
messageLineHeight '' Message lineHeight.
backgroundColor '' Background color of the Toast
theme '' It can be light or dark or set another class. Create and use like this ".iziToast-theme-name"
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.
iconUrl new null Address of file to be loaded. Example
image '' Cover image. Example
imageWidth 50 Width of cover image. Example 100px
maxWidth 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
closeOnEscape false Allows to close toast using the Esc key.
closeOnClick new false Allows to close toast clicking on it.
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.
toastOnce depreciated false Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
displayMode new 0 - Waits until the toast is closed so you can open it (Use 1 or 'once'). Example
- Replaces the toast that was already open (Use 2 or 'replace'). Example
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.
progressBarEasing 'linear' Animation Easing of progress bar.
overlay false Enables display the Overlay layer on the page.
overlayClose false Allows to close toast clicking on the Overlay.
overlayColor 'rgba(0, 0, 0, 0.6)' Overlay background color.
animateInside true Enable animations of elements in the toast. Example True and Example False.
buttons {} You can specify an array of buttons. Example
inputs new {} You can specify an array of inputs. 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.
onOpening function() {} Callback function triggered when opening the toast.
onOpened function() {} Callback function triggered when onOpened the toast.
onClosing function() {} Callback function triggered when closing the toast.
onClosed function() {} Callback function triggered when closed the toast.



is used to set default values.

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


Opens the toast. (Example with buttons).

                            theme: '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!");
                                }, true], // true to focus
                                ['', function (instance, toast) {
                                        transitionOut: 'fadeOutUp',
                                        onClosing: function(instance, toast, closedBy){
                                  'closedBy: ' + closedBy); // The return will be: 'closedBy: buttonName'
                                    }, toast, 'buttonName');
                            onOpening: function(instance, toast){
                      'callback abriu!');
                            onClosing: function(instance, toast, closedBy){
                      'closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'


Closes the specific toast.

                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.hide({}, toast);
                        // Or make new settings                
                            transitionOut: 'fadeOutUp'
                        }, toast);



Control progress bar time.

                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.progress({}, toast).reset();  // Reset progress bar time

                        iziToast.progress({}, toast).pause();  // Pause progress bar time

                        iziToast.progress({}, toast).resume();  // Resume progress bar time

                        iziToast.progress({}, toast).start();  // Pause progress bar time

                        // Full example
                        iziToast.progress(options, toast, callback).start();


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',


                            timeout: 20000,
                            close: false,
                            overlay: true,
                            displayMode: 'once',
                            id: 'question',
                            zindex: 999,
                            title: 'Hey',
                            message: 'Are you sure about that?',
                            position: 'center',
                            buttons: [
                                ['', function (instance, toast) {

                                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                                }, true],
                                ['', function (instance, toast) {

                                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                            onClosing: function(instance, toast, closedBy){
                      'Closing | closedBy: ' + closedBy);
                            onClosed: function(instance, toast, closedBy){
                      'Closed | closedBy: ' + closedBy);


                            timeout: 20000,
                            overlay: true,
                            displayMode: 'once',
                            id: 'inputs',
                            zindex: 999,
                            title: 'Inputs',
                            message: 'Examples',
                            position: 'center',
                            drag: false,
                            inputs: [
                                ['', 'change', function (instance, toast, input, e) {
                                ['', 'keyup', function (instance, toast, input, e) {
                                }, true],
                                ['', 'keydown', function (instance, toast, input, e) {



Capture when the toast is opening.

                        // You can compare by any option (id, class, etc...)

                        document.addEventListener('iziToast-opening', function(data){

                            // data.detail will bring all toast settings.
                            if(data.detail.class == 'test'){
                      'EventListener iziToast-opening');


Capture when the toast is opened.

                        document.addEventListener('iziToast-opened', function(data){
                            if(data.detail.class == 'test'){
                      'EventListener iziToast-opened');


Capture when the toast is closing.

                        document.addEventListener('iziToast-closing', function(data){
                            if(data.detail.class == 'test'){
                      'EventListener iziToast-closing');


Capture when the toast is closed.

                        document.addEventListener('iziToast-closed', function(data){
                            if(data.detail.class == 'test'){
                      'EventListener iziToast-closed');
                      'closedBy:', data.detail.closedBy);

Made with by Marcelo Dolza.

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