Highly Customizable jQuery Toast Message Plugin - Toastr

Highly Customizable jQuery Toast Message Plugin - Toastr
File Size: 358 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Toastr is a simple yet robust jQuery toast notification plugin which lets you create highly customizable toast messages on your webpage.

Main features:

  • Can be placed anywhere on the webpage.
  • 4 built-in toast types: success, info, warning and error.
  • Custom show/hide animations.
  • Auto dismiss with progress bar.
  • Allows to prevent duplicates.

Basic usage:

1. Download and include the jQuery Toastr plugin's files into your webpage which has jQuery library installed.

<link href="toastr.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="toastr.js"></script>

2. Display toast messages with default options on the webpage.

// with no title
// with a title
toastr.error('Error', 'Error Title')

3. Override the default configuration options.

toastr.error('Error', 'Error Title',{
  tapToDismiss: true,
  toastClass: 'toast',
  containerId: 'toast-container',
  debug: false,

  showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
  showDuration: 300,
  showEasing: 'swing', //swing and linear are built into jQuery
  onShown: undefined,
  hideMethod: 'fadeOut',
  hideDuration: 1000,
  hideEasing: 'swing',
  onHidden: undefined,
  closeMethod: false,
  closeDuration: false,
  closeEasing: false,

  extendedTimeOut: 1000,
  iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
  iconClass: 'toast-info',
  positionClass: 'toast-top-right',
  timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
  titleClass: 'toast-title',
  messageClass: 'toast-message',
  escapeHtml: false,
  target: 'body',
  closeHtml: '<button type="button">&times;</button>',
  newestOnTop: true,
  preventDuplicates: false,
  progressBar: false

4. Clear current toast messages.

// Without using animation

// Using animation

This awesome jQuery plugin is developed by CodeSeven. For more Advanced Usages, please check the demo page or visit the official website.