A Simple Toast Notification Library

Download Toast.JS

Currently v1.1.0

What is a "toast"?

Toast is not only a delicious breakfast food but also a simple, time limited notification. A toast message is a quick and easy way to alert a user that some action has occurred and after a certain amount of time has passed, the toast message will disappear.

Toasts are a simple, time dependent notification.

Multiple open toasts not supported

Be sure not to open a toast while another is still visible. Showing more than one toast at a time requires custom code.

Examples

Static example

A rendered toast with body.


                                            <div
                                            class="toast fade"
                                            tabindex="-1"
                                            role="dialog">


                                            <div
                                            class="toast-dialog"
                                            role="document">


                                            <div
                                            class="toast-content">


                                            <div
                                            class="toast-body">


                                            Sample Toast


                                            </div>


                                            </div>


                                            </div>


                                            </div>

Live example

Toggle a toast via JavaScript by clicking the button below. It will slide up and fade in from the bottom of the page.


                                            <-- Button trigger toast -->


                                            <button
                                            type="button"
                                            class="btn btn-warning btn-square btn-lg"
                                            data-toggle="toast"
                                            data-target="#myToast">


                                            Launch demo toast


                                            </button>


                                            <-- Toast -->


                                            <div
                                            class="toast fade"
                                            id="myToast"
                                            tabindex="-1"
                                            role="dialog">


                                            <div
                                            class="toast-dialog"
                                            role="document">


                                            <div
                                            class="toast-content">


                                            <div
                                            class="toast-body">

...


                                            </div>


                                            </div>


                                            </div>


                                            </div>

Optional styles

Multiple ways to style supported

The stylings for toasts can be applied in two different ways: through .toast-* or with toast options.

Default stylings

By default, the stylings for .toast-default will be applied to any unstyled toast.

Toasts have three total styles available: .toast-default, .toast-round, and .toast-square.


                                            <-- Default toast -->


                                            <div
                                            class="toast toast-default fade"
                                            tabindex="-1"
                                            role="dialog">

...


                                            </div>


                                            <-- Round toast -->


                                            <div
                                            class="toast toast-round fade"
                                            tabindex="-1"
                                            role="dialog">

...


                                            </div>


                                            <-- Square toast -->


                                            <div
                                            class="toast toast-square fade"
                                            tabindex="-1"
                                            role="dialog">

...


                                            </div>

Optional sizes

Toasts have two optional sizes, available via modifier classes to be placed on a .toast-dialog.


                                            <-- Large toast -->


                                            <button
                                            type="button"
                                            class="btn btn-warning btn-square btn-lg"
                                            data-toggle="toast"
                                            data-target="#myToastLg">


                                            Large toast


                                            </button>


                                            <div
                                            class="toast fade"
                                            tabindex="-1"
                                            role="dialog">


                                            <div
                                            class="toast-dialog toast-lg"
                                            role="document">


                                            <div
                                            class="toast-content">

...


                                            </div>


                                            </div>


                                            </div>


                                            <-- Small toast -->


                                            <button
                                            type="button"
                                            class="btn btn-warning btn-square btn-lg"
                                            data-toggle="toast"
                                            data-target="#myToastSm">


                                            Small toast


                                            </button>


                                            <div
                                            class="toast fade
                                            tabindex="-1"
                                            role="dialog">


                                            <div
                                            class="toast-dialog toast-sm"
                                            role="document">


                                            <div
                                            class="toast-content">

...


                                            </div>


                                            </div>


                                            </div>

Remove animation

For toasts that simply appear rather than fade in to view, remove the .fade class from your toast markup.


                                            <div
                                            class="toast"
                                            tabindex="-1"
                                            role="dialog">

...


                                            </div>

Usage

The toast plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds a .toast-backdrop to provide a click area for dismissing shown toasts when clicking outside the toast.

Via data attributes

Activate a toast without writing JavaScript. Set data-toggle="toast" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific toast to toggle.


                                            <button
                                            type="button"
                                            data-toggle="toast"
                                            data-target="#myToast">Launch toast</button>

Via JavaScript

Call a toast with id myToast with a single line of JavaScript:


                                            $('#myToast').toast(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name	type	default	description
backdrop	boolean or the string `'static'`	true	Includes a toast-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the toast on click.
keyboard	boolean	true	Closes the toast when escape key is pressed.
show	boolean	true	Shows the toast when initialized.
style	string	'default'	Styles the toast. Available styles: `.toast-default`, `.toast-round`, or `.toast-square`
timeout	number	3000	The amount of time to display the toast for before it dismisses itself.

Timeout option

By adjusting the value for data-timeout, you can control how long the toast will stay visible for.


                                            <-- Button trigger toast -->


                                            <button
                                            type="button"
                                            class="btn btn-warning btn-square btn-lg"
                                            data-toggle="toast"
                                            data-target="#myToastTimeout"
                                            data-timeout="5000">


                                            Launch demo toast


                                            </button>


                                            <-- Toast -->


                                            <div
                                            class="toast fade"
                                            id="myToast"
                                            tabindex="-1"
                                            role="dialog">


                                            <div
                                            class="toast-dialog"
                                            role="document">


                                            <div
                                            class="toast-content">


                                            <div
                                            class="toast-body">

...


                                            </div>


                                            </div>


                                            </div>


                                            </div>

Methods

.toast(options)

Activates your content as a toast. Accepts an optional options object.


                                            $('#myToast').toast({


                                            keyboard:
                                            false

})

.toast('toggle')

Manually toggles a toast. Returns to the caller before the toast has actually been shown or hidden (i.e. before the shown.bs.toast or hidden.bs.toast event occurs).


                                            $('#myToast').toast('toggle')

.toast('show')

Manually opens a toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs).


                                            $('#myToast').toast('show')

.toast('hide')

Manually hides a toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs).


                                            $('#myToast').toast('hide')

Events

Bootstrap's toast class exposes a few events for hooking into toast functionality.

All toast events are fired at the toast itself (i.e. at the <div class="toast">).

Event type	description
show.bs.toast	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.bs.toast	This event is fired when the toast has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.bs.toast	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.toast	This event is fired when the toast has finished being hidden from the user (will wait for CSS transitions to complete).


                                            $('#myToast').on('hidden.bs.toast',
                                            function
                                            (e) {


                                            // do something...

})

A Simple Toast Notification Library

What is a "toast"?

Toast toast.js

Multiple open toasts not supported

Examples

Static example

Live example

Optional styles

Multiple ways to style supported

Default stylings

Optional sizes

Remove animation

Usage

Via data attributes

Via JavaScript

Options

Timeout option

Methods

Events