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
MDBootstrap
11 mins ago
Basic Example
const instance = mdb.Toast.getInstance(document.getElementById('example'));
instance.show();
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
const instance = mdb.Toast.getInstance(document.getElementById('example'));
instance.update({ color: 'info / warning / success / danger', });
You can set position of every notification using
data-mdb-position attribute or update() method.
Select horizontal / vertical alignment
MDBootstrap
11 mins ago
Toast position
const instance =
mdb.Toast.getInstance(document.getElementById('position-example-toast'));
instance.update({ position: 'top-right', });
You can also change offset of every notification using
data-mdb-offset attribute or update() method.
MDBootstrap
11 mins ago
Toast offset
const instance =
mdb.Toast.getInstance(document.getElementById('offset-toast'));
instance.update({ offset: 50, });
You can display notification anywhere. Just put your toast in your target
element and fill data-mdb-container attribute with id or class of
parent or update() method.
MDBootstrap
11 mins ago
Toast container
const instance =
mdb.Toast.getInstance(document.getElementById('container-example-toast'));
instance.update({ container: '#parent', });
You can turn on/off stacking your notifications using
data-mdb-stacking attribute or update() method.
let stackCount = 0;
document.getElementById('stacking-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
${stackCount}
11 mins ago
Stacking element
`;
toast.classList.add('toast', 'fade');
document.body.appendChild(toast);
const toastInstance = new mdb.Toast(toast, {
stacking: true,
hidden: true,
width: '450px',
position: 'top-right',
autohide: false,
delay: 5000,
});
toastInstance.show();
});
You can turn on/off stacking your notifications using
data-mdb-stacking attribute or update() method.
let stackCount = 0;
document.getElementById('stacking-container-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
${stackCount}
11 mins ago
Stacking element
`;
toast.classList.add('toast', 'fade');
document.getElementById('stacking-container').appendChild(toast);
const toastInstance = new mdb.Toast(toast, {
stacking: true,
hidden: true,
width: '450px',
position: 'top-right',
container: '#stacking-container',
autohide: true,
delay: 5000,
});
toastInstance.show();
});
MDBootstrap
11 mins ago
Example toast
mdb.Toast.getInstance(document.getElementById('placement-example-toast')).update({
position: ..., offset: ..., container: ... });
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.example-class').toast(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 |
| 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();
| 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 });
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Toast } from 'mdb-ui-kit';