Click here to Skip to main content
13,198,850 members (42,051 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 14 Jul 2014

JavaScript Toast notification for the websites and HTML5 apps using toastr.js

, 16 Jul 2014
Rate this:
Please Sign up or sign in to vote.
In this small tip, I will talk about toastr.js. A simple JavaScript library to create toast notifications for websites and single page applications.


In this small tip, I will talk about toastr.js. A simple JavaScript library to create toast notifications for websites and single page applications.


I recently came across a requirement which needed toast notification on a website. This website was an ASP.NET MVC website and a part of it was a Single page application using backbone.js. So I decided to look around the web and see what libraries can be used for toast notification on any kind of web application. That is when I came across toastr.js ( I looked into this library and I have to say it appears to be the best toast notification JavaScript library available.

What I liked about toastr.js:

  • Very easy to use
  • Very easy to integrate
  • Pure JavaScript library, no external dependency
  • Fully responsive
  • Nice customization options
  • Any HTML element/control can be put on the toast notification

Using the Code

Using toastr is as easy as including the required JavaScript and CSS files in our application.

<script src="~/Scripts/toastr.min.js"></script>

I did this in my main.html of my backbone single page application and for ASP.NET MVC application, I added these files in CSS and JS bundles in BundleConfig.cs.

As for the usage part, the usage of the toastr is pretty straight forward. It gives us 4 types of toast notifications:

  1. Success: toastr[success]("Message will come here", "Title")
  2. Error: Success: toastr[error]("Message will come here", "Title")
  3. Warning: Success: toastr[warning]("Message will come here", "Title")
  4. Information: Success: toastr[info]("Message will come here", "Title")

The position of toastr notification can also be simply specified by using the position enumeration. There are 6 possible positions for toastr:

  1. Top Right: toast-top-right
  2. Top Left: toast-top-left
  3. Bottom Right: toast-bottom-right
  4. Bottom Left: toast-bottom-left
  5. Top Full Width: toast-top-full-width
  6. Bottom Full Width: toast-bottom-full-width

This position can be passed in the toastr options. There are many other options available in toastr to configure the animation and behavior of the toastr notification. Here is an example showing all the available options for toastr.js.

toastr.options = {
"closeButton": false,
"debug": false,
"positionClass": "toast-bottom-full-width",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"

Point of Interest

This simplicity and power is just phenomenal. I have decided to use this library for all my toast notification needs on websites and HTML5 apps.

toastr.js code, CDN access and documentation can be found at:
Here is a live demo for tastr.js:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rahul Rajat Singh
Software Developer (Senior)
India India

I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.

  • Microsoft Certified Technology Specialist (MCTS): Web Applications Development with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Accessing Data with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Windows Communication Foundation Development with Microsoft .NET Framework 4

If you like my articles, please visit my website for more:[^]

  • Microsoft MVP 2015

You may also be interested in...


Comments and Discussions

QuestionQuestion Pin
Member 120787509-Nov-15 2:09
memberMember 120787509-Nov-15 2:09 
Generalsource code Pin
Xavi Giqwa14-Jul-14 20:24
memberXavi Giqwa14-Jul-14 20:24 
AnswerRe: source code Pin
Rahul Rajat Singh14-Jul-14 20:37
mvpRahul Rajat Singh14-Jul-14 20:37 
GeneralRe: source code Pin
Xavi Giqwa14-Jul-14 20:54
memberXavi Giqwa14-Jul-14 20:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 16 Jul 2014
Article Copyright 2014 by Rahul Rajat Singh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid