Toasts

Bootstrap 5 Toasts

Push notifications to your visitors with a 'toast', a lightweight and easily customizable alert message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization

Basic example

const instance = mdb.Toast.getInstance(document.getElementById('example')); instance.show();

Colors

 const instance = mdb.Toast.getInstance(document.getElementById('example')); instance.update({ color: 'info / warning / success / danger', });

Placement

You can set position of every notification using data-position attribute or update() method.

Select horizontal / vertical alignment

Current position: top-right
const instance = mdb.Toast.getInstance(document.getElementById('position-example-toast')); instance.update({ position: 'top-right', });

Offset

You can also change offset of every notification using data-offset attribute or update() method.

const instance = mdb.Toast.getInstance(document.getElementById('offset-toast')); instance.update({ offset: 50, });

Container

You can display notification anywhere. Just put your toast in your target element and fill data-container attribute with id or class of parent or update() method.

const instance = mdb.Toast.getInstance(document.getElementById('container-example-toast')); instance.update({ container: '#parent', });

Stacking

You can turn on/off stacking your notifications using data-stacking attribute or update() method.

const instance = mdb.Toast.getInstance(document.getElementById('stacking-toast-one')); const secondInstance = mdb.Toast.getInstance(document.getElementById('stacking-toast-two')); instance.update({ stacking: true, }); secondInstance.update({ stacking: true, });

Toasts - API

Usage

Via data attributes

Via JavaScript

mdb.Toast.getInstance(document.getElementById('placement-example-toast')).update({ position: ..., offset: ..., container: ... });

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

$('.example-class').toast(options);

Options

Name Type Default Description
width String / null null Defines the width of a toast
position String 'top-left' Changes position of toast
color String Sets background of a toast (basic MDB colors)
offset Number '10' Changes offset of toast
container String - Defines id/class of parent element
autohide Boolean true Toasts will hide automatically or not
animation Boolean true Toasts will be animated or not
delay Boolean 500 Sets length of animation delay
appendToBody Boolean false Appends element to the end of body
stacking Boolean true Enables stacking notifications

Methods

Name Parameters Description Example
show - Shows toast instance.show()
hide - Hides toast instance.hide()
dispose - Removes a mdb.Toast instance instance.dispose()
update options (Object) Updates options of mdb.Toast instance instance.update({position: 'top-center'})
mdb.Toast.getInstance(document.getElementById('show-example')).show();

Events

Name Description
show.bs.toast Emitted when a toast has been toggled
shown.bs.toast Emitted once toast is shown
hide.bs.toast Emitted when a toast has been toggled
hidden.bs.toast Emitted once toast is hidden
const instance = mdb.Toast.getInstance(document.getElementById('show-example')); instance.addEventListener('hidden.bs.toast', () => { // do something });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

import { Toast } from 'mdb-ui-kit';