Skip to the content.

A lightweight toast notification JavaScript library (2.47kb)

Files

toastr.js

const toastr={setup:function(t,e,n){const s=$("<div/>",{id:"toastr-container"});t.append(s),e&&(toastr.variables.expiry=parseInt(e)),n&&(toastr.variables.delay=parseInt(n))},toast:function(t,e,n,s){toastr.events.queue.add(function(){const a=$("#toastr-container");if(!a.length)throw"toastr hasn't been initialized! Use toastr.setup('jQuery')";{const o=$("<div/>",{class:`toastr-toast${null!=e?" "+e:""}`}).append($("<span/>",{class:"toast-text",text:t}));if(o.on("click",function(){o.addClass("clicked"),toastr.events.expire(o,!0)}),n||s){if(n){const t=$("<span/>",{class:`toastr-button${n.class?" "+n.class:" "}`,text:n.text});t.on("click",function(){n.callback()}),o.append(t)}if(s){const t=$("<span/>",{class:`toastr-button${s.class?" "+s.class:" "}`,text:s.text});t.on("click",function(){s.callback()}),o.append(t)}}else toastr.events.expire(o);a.prepend(o),toastr.events.reposition(o)}})},events:{reposition:function(){const t=$(".toastr-toast");t.length;let e=0,n=0;t.each(function(n){e+=$(t[n]).outerHeight()}),t.each(function(e){const s=$(t[e]);s.css("bottom",n),n+=s.outerHeight()+10})},expire:function(t,e){function n(t){t.animate({left:`-${2*t.outerWidth()}`},{duration:1e3,complete:function(){t.remove(),toastr.events.reposition()}})}e?n(t):setTimeout(function(){n(t)},toastr.variables.expiry)},queue:{line:[],running:!1,add:function(t){toastr.events.queue.line.push(t),toastr.events.queue.run()},run:function(){if(!toastr.events.queue.running){toastr.events.queue.running=!0;var t=setInterval(function(){toastr.events.queue.line.length?(toastr.events.queue.line[0](),toastr.events.queue.line.shift()):(clearInterval(t),toastr.events.queue.running=!1)},toastr.variables.delay)}}}},variables:{expiry:5e3,delay:1e3}};

toastr.css

#toastr-container{position:fixed;bottom:0;left:0;margin:10px;height:100%;width:100%;overflow:hidden;pointer-events:none}.toastr-toast{margin:10px;padding:10px 20px;border-radius:5px;font-size:14px;opacity:1;position:fixed;bottom:-100vh;transition:bottom 1s ease-in-out;pointer-events:all;background-color:#2f2f2f;color:#efefef;width:max-content;max-width:500px}.toastr-toast .toastr-text{max-width:200px}.toastr-toast .warning,.toastr-toast.warning{background-color:orange;color:#efefef}.toastr-toast .danger,.toastr-toast.danger{background-color:red;color:#efefef}.toastr-toast .toastr-button:not(.warning,.danger){background-color:#2f2f2f;color:#efefef}.toastr-button{margin:0 5px;border:1px solid #fff;padding:5px 10px;border-radius:5px;text-transform:uppercase;font-size:.8em;display:inline-block}

Initialization

toastr.setup() takes three arguments (bold = required):

toastr.setup($('body'), 7500, 500);

Delay example

Using Toastr

Creating a toast

toastr.toast() takes four arguments (bold = required):

Create basic toast

Buttons

Buttons can be used to chain toasts in a fashionable manner or display information only if the user requests.

The button object takes three parameters (bold = required):

Create chained toast

Example:

toastr.toast('Do you like goats?', false, {
  text: 'Yes',
  callback: function() {
    toastr.toast('How much do you like goats?', false, {
      text: 'Lots',
      callback: function() {
        toastr.toast('You like goats a lot!')
      }
    }, {
      text: 'A little',
      callback: function() {
        toastr.toast('You like goats a little')
      }
    });
  }
}, {
  text: 'No',
  class: 'danger',
  callback: function() {
    toastr.toast('You don\'t like goats');
  }
})