Toasts
Bootstrap 5 Toast component
Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.
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
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic example
Click the buttons to launch the toasts.
<!-- Trigger buttons -->
<button type="button" class="btn btn-primary" id="basic-primary-trigger" data-mdb-ripple-init>Primary</button>
<button type="button" class="btn btn-secondary" id="basic-secondary-trigger" data-mdb-ripple-init>Secondary</button>
<button type="button" class="btn btn-success" id="basic-success-trigger" data-mdb-ripple-init>Success</button>
<button type="button" class="btn btn-danger" id="basic-danger-trigger" data-mdb-ripple-init>Danger</button>
<button type="button" class="btn btn-warning" id="basic-warning-trigger" data-mdb-ripple-init>Warning</button>
<button type="button" class="btn btn-info" id="basic-info-trigger" data-mdb-ripple-init>Info</button>
<button type="button" class="btn btn-light" id="basic-light-trigger" data-mdb-ripple-init>Light</button>
<button type="button" class="btn btn-dark" id="basic-dark-trigger" data-mdb-ripple-init>Dark</button>
<!-- Toasts -->
<div
class="toast fade mx-auto"
id="basic-primary-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="primary"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Primary Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-secondary-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="secondary"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Secondary Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-success-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="success"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Success Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-danger-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="danger"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Danger Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-warning-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="warning"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Warning Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-info-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="info"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Info Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-light-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="light"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Light Basic Example</div>
</div>
<div
class="toast fade mx-auto"
id="basic-dark-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="true"
data-mdb-delay="2000"
data-mdb-position="top-right"
data-mdb-append-to-body="true"
data-mdb-stacking="true"
data-mdb-width="350px"
data-mdb-color="dark"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Dark Basic Example</div>
</div>
import { Toast, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Toast, Ripple });
const toasts = [
'basic-primary-example',
'basic-secondary-example',
'basic-success-example',
'basic-danger-example',
'basic-warning-example',
'basic-info-example',
'basic-light-example',
'basic-dark-example',
];
const triggers = [
'basic-primary-trigger',
'basic-secondary-trigger',
'basic-success-trigger',
'basic-danger-trigger',
'basic-warning-trigger',
'basic-info-trigger',
'basic-light-trigger',
'basic-dark-trigger',
];
triggers.forEach((trigger, index) => {
let basicInstance = Toast.getInstance(document.getElementById(toasts[index]));
document.getElementById(trigger).addEventListener('click', () => {
basicInstance.show();
});
});
const toasts = [
'basic-primary-example',
'basic-secondary-example',
'basic-success-example',
'basic-danger-example',
'basic-warning-example',
'basic-info-example',
'basic-light-example',
'basic-dark-example',
];
const triggers = [
'basic-primary-trigger',
'basic-secondary-trigger',
'basic-success-trigger',
'basic-danger-trigger',
'basic-warning-trigger',
'basic-info-trigger',
'basic-light-trigger',
'basic-dark-trigger',
];
triggers.forEach((trigger, index) => {
let basicInstance = mdb.Toast.getInstance(document.getElementById(toasts[index]));
document.getElementById(trigger).addEventListener('click', () => {
basicInstance.show();
});
});
Static example
<div
class="toast show fade mx-auto"
id="static-example"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="false"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Static Example</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
Colors
Since 4.2.0 release our toasts have their own color palette, so we don't use
.bg-*
and .text-*
color classes. For a crisp edge, we removed the
default border with .border-0
.
<div class="row justify-content-center">
<div class="col-xl-5 col-lg-6 mb-2">
<div
class="toast show fade"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-color="info"
data-mdb-autohide="false"
>
<div class="toast-header">
<i class="fas fa-info-circle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
<div class="col-xl-5 col-lg-6 mb-2">
<div
class="toast show fade"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-color="warning"
data-mdb-autohide="false"
>
<div class="toast-header">
<i class="fas fa-exclamation-triangle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
<div class="row mb-2 justify-content-center">
<div class="col-xl-5 col-lg-6 mb-2">
<div
class="toast show fade"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-color="success"
data-mdb-autohide="false"
>
<div class="toast-header">
<i class="fas fa-check fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
<div class="col-xl-5 col-lg-6 mb-2">
<div
class="toast show fade"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-color="danger"
data-mdb-autohide="false"
>
<div class="toast-header">
<i class="fas fa-exclamation-circle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
Placement
You can set position of every notification using
data-mdb-position
attribute or update()
method.
Select horizontal / vertical alignment
Current position: top-right
<div
class="toast show"
id="placement-example-toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="false"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Toast position</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
const instance = Toast.getInstance(document.getElementById('placement-example-toast'));
instance.update({ position: 'top-right', });
const instance = mdb.Toast.getInstance(document.getElementById('placement-example-toast'));
instance.update({ position: 'top-right', });
Offset
You can also change offset of every notification using
data-mdb-offset
attribute or update()
method.
<div
class="toast"
id="offset-toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="false"
data-mdb-offset="50"
data-mdb-color="info"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Toast offset</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
Container
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.
<div id="parent">
<div
class="toast"
id="container-example-toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-mdb-toast-init
data-mdb-autohide="false"
data-mdb-container="#parent"
>
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Toast container</div>
</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
Stacking
You can turn on/off stacking your notifications using
data-mdb-stacking
attribute or update()
method.
<button type="button" class="btn btn-primary me-3" id="stacking-trigger" data-mdb-ripple-init>Show toast notification</button>
// Initialization for ES Users
import { Toast, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Toast, Ripple });
let stackCount = 0;
document.getElementById('stacking-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${stackCount}</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Stacking element
</div>
`;
toast.classList.add('toast', 'fade');
document.body.appendChild(toast);
const toastInstance = new Toast(toast, {
stacking: true,
hidden: true,
width: '450px',
position: 'top-right',
autohide: false,
delay: 5000,
});
toastInstance.show();
});
let stackCount = 0;
document.getElementById('stacking-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${stackCount}</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Stacking element
</div>
`;
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();
});
Stacking (container)
You can turn on/off stacking your notifications using
data-mdb-stacking
attribute or update()
method.
<div class="container text-center" id="stacking-container" style="height: 400px; overflow: scroll;">
<button type="button" class="btn btn-primary me-3" id="stacking-container-trigger" data-mdb-ripple-init>Show toast notification</button>
</div>
// Initialization for ES Users
import { Toast, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Toast, Ripple });
let stackCount = 0;
document.getElementById('stacking-container-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${stackCount}</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start">
Stacking element
</div>
`;
toast.classList.add('toast', 'fade');
document.getElementById('stacking-container').appendChild(toast);
const toastInstance = new Toast(toast, {
stacking: true,
hidden: true,
width: '450px',
position: 'top-right',
container: '#stacking-container',
autohide: true,
delay: 5000,
});
toastInstance.show();
});
let stackCount = 0;
document.getElementById('stacking-container-trigger').addEventListener('click', () => {
stackCount++;
const toast = document.createElement('div');
toast.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${stackCount}</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start">
Stacking element
</div>
`;
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();
});
Toasts - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
import { Toast, initMDB } from "mdb-ui-kit";
initMDB({ Toast });
import "mdb-ui-kit"
Usage
Via data attributes
Using the Toasts component doesn't require any additional JavaScript code - simply add
data-mdb-toast-init
attribute to
.toast
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
<div class="toast" data-mdb-toast-init id="example-toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="toast-body">Example toast</div>
</div>
Dismiss
Dismissal can be achieved with data attributes on a button within the toast as demonstrated below:
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
or on a button outside the toast using the data-mdb-target
as
demonstrated below:
<button type="button" class="btn-close" data-mdb-dismiss="toast" data-mdb-target="#my-toast" aria-label="Close"></button>
Via JavaScript
const element = document.querySelector('.toast');
const instance = new Toast(element);
const element = document.querySelector('.toast');
const instance = new mdb.Toast(element);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.example-class').toast(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-offset="10"
.
Name | Type | Default | Description |
---|---|---|---|
width
|
String / null | null |
Defines the width of a toast |
position
|
String | null |
Sets the position of the toast. The option includes a horizontal component:
top or bottom , and a vertical component: left ,
center , or right , with the horizontal part specified first
and connected with a dash. For example, top-left
|
color
|
String | null | null |
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 |
Number | 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 | Description | Example |
---|---|---|
show |
Shows toast | myToast.show() |
hide |
Hides toast | myToast.hide() |
dispose
|
Removes a mdb.Toast instance |
myToast.dispose()
|
getInstance |
Static method which allows you to get the toast instance associated to a DOM element. | Toast.getInstance(toastEl) |
getOrCreateInstance |
Static method which returns the toast instance associated to a DOM element or create a new one in case it wasn't initialized. |
Toast.getOrCreateInstance(toastEl)
|
update |
Updates options of mdb.Toast instance |
myToast.update({position: 'top-center'})
|
const toastEl = document.getElementById('show-example');
const toast = new Toast(toastEl);
toast.show();
const toastEl = document.getElementById('show-example');
const toast = new mdb.Toast(toastEl);
toast.show();
Events
Name | Description |
---|---|
show.mdb.toast
|
Emitted when a toast has been toggled |
shown.mdb.toast
|
Emitted once toast is shown |
hide.mdb.toast
|
Emitted when a toast has been toggled |
hidden.mdb.toast
|
Emitted once toast is hidden |
const instance = mdb.Toast.getInstance(document.getElementById('show-example'));
instance.addEventListener('hidden.mdb.toast', () => {
// do something...
});
CSS variables
As part of MDB’s evolving CSS variables approach, toast now use local CSS variables on
.toast
for enhanced real-time customization. Values for the CSS variables are set
via Sass, so Sass customization is still supported, too.
// .toast
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};
--#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
--#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
--#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
--#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
// .toast-container
--#{$prefix}toast-zindex: #{$zindex-toast};
SCSS variables
$toast-max-width: 350px;
$toast-font-size: 0.875rem;
$toast-color: null;
$toast-border-width: var(--#{$prefix}border-width);
$toast-border-color: var(--#{$prefix}border-color-translucent);
$toast-spacing: $container-padding-x;
$toast-header-color: var(--#{$prefix}secondary-color);
$toast-header-border-color: $toast-border-color;
$toast-box-shadow: $box-shadow-4;
$toast-border-radius: $border-radius-lg;
$toast-border-bottom-width: $border-width-alternate;
$toast-background-color: var(--#{$prefix}surface-bg);
$toast-padding-x: 1rem;
$toast-padding-y: 0.65rem;
$toast-header-background-color: var(--#{$prefix}surface-bg);
$toast-btn-close-width: 1.3em;
$toast-btn-close-mr: -0.375rem;
$toast-btn-close-ml: 0.75rem;