Just a few months ago Hans Fjällemark and I released toastr and since then we’ve had a lot of great feedback that we’ve worked into our free open source library. Toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this:

Update: Version is now 1.1.1, since there was an API change (still backwards compatible) - added AMD support and version number.

image

Simply include the files in your HTML page and write a simple line of code like this:

toastr.success('Are you the six fingered man?', 'Inigo Montoya');

Click the this button to try it yourself.

# Get the Latest Bits for toastr 1.1.1

You can grab the latest bits from NuGet or github

# What's New in 1.1.1

Today we finished the final changes for a new version of toastr (toastr 1.1.1). Here is a summary of the changes:

  • Now supports AMD modules or non AMD modules (still backwards compatible)
  • Added version property to return toastr's version
console.log(toastr.version);
  • Now requires jQuery 1.6.3 or later (formerly 1.7.2)
  • Combined the 2 CSS files into 1 CSS file (contains all CSS and its media queries for responsive web design)
  • Cleaned some outdated vendor prefixes in the CSS (thanks to Web Essentials 2012)
  • New clear method to clear all toasts
toastr.clear();
  • Added optionsOverride API to be able to override options for each toast,
var msg = 'Do you think Rodents of Unusual Size really exist?';
var title = 'Fireswamp Legends';
var overrides = {timeOut: 250};
toastr.warning(msg, title, overrides);
  • Added onclick callback option which fires when a user clicks the toast.
toastr.options.onclick = function () {
    alert('You can perform some custom action after a toast goes away');
}

toastr.info('Build a SPA');

# Live Demo

Needs more information? Check out the readme on the github page for details on the simple API. You can also find a link to the live toastr demo on github or you can go directly to the toastr demo from here.