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-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-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-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-stacking
attribute or update()
method.
MDBootstrap
11 mins ago
First stacking element
MDBootstrap
11 mins ago
Second stacking element
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,
});
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';