Toastr is a simple javascript library for non-blocking notifications, that can be customized and extended.

GitHub Toastr


toastr.warning('Display a warning toast, with no title');
toastr.success('Success title', 'Display a success toast');
toastr.error('Error title', 'Display an error toast');'Lets put it in the air <a class="float-xs-right">RollBock!</a>');

// Immediately remove current toasts
// Remove current toasts using animation
// Override global options
toastr.success('Success title', 'Display a success toast', {timeOut: 5000})

Set default values

toastr.options = { 
    closeButton: true,
    escapeHtml: false;
    positionClass:  'toast-bottom-right', 
    closeHtml:      '<button><span class="icon icon-close ml-3"></span></button>'


Define a callback for when the toast is shown/hidden/clicked.

toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }

Prevent duplicates

Rather than having identical toasts stack, set the preventDuplicates property to true. Duplicates are matched to the previous toast based on their message content.

toastr.options.preventDuplicates = true;


Control how toastr interacts with users by setting timeouts appropriately. Timeouts can be disabled by setting them to 0.

toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it

Display sequence

Show newest toast at bottom (top is default)

toastr.options.newestOnTop = false;