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.


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
  • 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
  • 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.