Vue Toasts

Vue 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

Basic example

Click the buttons to launch the toasts.

Static example



You can set position of every notification using position property.

Select horizontal / vertical alignment

Current position: top-right


You can also change offset of every notification using offset property.


You can display notification anywhere. Just put your toast in your target element and fill container property with id or class of parent.


You can turn on/off stacking your notifications using stacking property.

Stacking (container)

You can also stack alerts inside the container

Vue Toasts - API


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


Name Type Default Description
tag String 'div' Defines tag of the MDBToast element
position String 'top-right' Sets a position for the toast. Any combination of 'vertical-horizontal' position: 'top|bottom-left|center|right'
delay Number 5000 Sets the length of animation delay
autohide Boolean true Alerts will hide automatically or not
width String 'unset' Sets width of toast
stacking Boolean true Enables stacking toasts
offset String '10 Changes toast offset
container String '' Defines container selector
appendToBody Boolean false Appends element to the end of the body
color String null Allows to set the color of an toast - primary | secondary | secondary | danger | warning | info | light | dark
text String '' Set to 'white' for better text contrast on dark toast background
icon String '' Adds icon with given class to a toast header
animation Boolean true Allows to turn on or off the showing and hiding toast animation
static Boolean false Makes toast static (open by default)
id String 'MDBToast-generated id' Allows to add custom id to toast element
v-model String '' Returns current picked time


Name Description Example
show Manually shows an toast
hide Manually hides an toast toastRef.hide()

            <MDBTimepicker v-model="toast1" ref="toastRef" />
            <MDBBtn @click.stop="$" color="primary">Show</MDBBtn>


Name Description
show This event fires immediately when the show method is called or `v-model` is set to true
shown This event fires immediately when the Alert is shown
hide This event fires immediately when the hide method is called or `v-model` is set to false
hidden This event fires immediately when the Alert is hidden

            <MDBTimepicker v-model="picker1" @close="doSomething" />