void Tricks Logo
void Tricks Logo

toastr.js: Android Style Toast Notification Plugin for Web (free)

toastr.js is a javascript library for showing toast notifications like android and toatsr can be customized and requires no dependencies.

toastr.js: Android Style Toast Notification Plugin for Web (free)

About toastr.js

First things first, it is toastr not toaster.

Since toastr.js is written in vanilla javascript, it is light weight and it doesn't require any additional dependencies.

toastr.js is developed with the intention of providing Android Toast style notifications for websites.

Although, the default style is the replica of Android toast, you can still customize it with available options like theme, position, animation etc...



Download the zip file and extract it and copy toastr folder into your project.

Include toastr.min.js and toastr.min.css in your page.

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


Create a new instance inside a DOMContentLoaded or $("document").ready function like below.

Call toastr.show(text) method to trigger a notification, you can pass raw text or HTML.

<script>    //JavaScript
    document.addEventListener("DOMContentLoaded", function(){
        var toastr = new Toastr();

        //Triggering notification when a button clicked
        document.getElementById("notify").addEventListener("click", function(){
            //Pass notification text to show method
            toastr.show('Hi there! This is a Toast.');

        var toastr = new toastr();
        $("#notify").on("click", function(){
            toastr.show('Hi there! This is a Toast.');

Overriding Default Options

toastr.js allows you to pass options while instantiate that overrides the default options.

var toastr = new toastr({
    autohide: false,
    timeout: 1000,
    theme: 'ocean'

If you opt to disable autohide option you can manually hide the notification which may be your requirement in some cases.


toastr will do it for you otherwise.

Available Options


Changes the main color shceme of the notification.

Datatype: string; Allowed values: (moon, sun, ocean, grassland, rainbow)

Default: android


Sets the position of the trigger icon.

Datatype: string; Allowed values: (topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight)

Default: bottomCenter


Sets the time interval between notification showing and hiding.

Datatype: float (milliseconds);

Default: (milliseconds) 2000


Changes the animation of notification when it appears and hides.

Datatype: string; Allowed values: (fade, slide)

Default: fade


Controls whether you want the notification to hide automatically after triggering or not

Datatype: boolean; Allowed values: (true, false)

Default: true


10/06/2019 - First version of the toastr.js library.

Comments (0)