Alerts
Vue Bootstrap 5 Alerts component
Responsive Alerts built with the latest Bootstrap 5 and Vue 3. Alerts provide contextual feedback messages for typical user actions with a handful of responsible and flexible alert boxes.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Note: Read the API tab to find all available options and advanced customization
Basic examples
Click the buttons to launch the alerts.
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with
an example link. Give it a click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with
an example link. Give it a click if you like.
<template>
<!-- Trigger buttons -->
<MDBBtn color="primary" @click="alert1 = true"> Primary </MDBBtn>
<MDBBtn color="secondary" @click="alert2 = true"> Secondary </MDBBtn>
<MDBBtn color="success" @click="alert3 = true"> Success </MDBBtn>
<MDBBtn color="danger" @click="alert4 = true"> Danger </MDBBtn>
<MDBBtn color="warning" @click="alert5 = true"> Warning </MDBBtn>
<MDBBtn color="info" @click="alert6 = true"> Info </MDBBtn>
<MDBBtn color="light" @click="alert7 = true"> Light </MDBBtn>
<MDBBtn color="dark" @click="alert8 = true"> Dark </MDBBtn>
<!-- Alerts -->
<MDBAlert
v-model="alert1"
id="alert-primary"
color="primary"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="5000"
>
A simple primary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert2"
color="secondary"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="5000"
>
A simple secondary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert3"
color="success"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="5000"
>
A simple success alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert4"
color="danger"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="5000"
>
A simple danger alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert5"
color="warning"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="2000"
>
A simple warning alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert6"
color="info"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="2000"
>
A simple info alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert7"
color="light"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="2000"
>
A simple light alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert
v-model="alert8"
color="dark"
position="top-right"
stacking
width="535px"
appendToBody
autohide
:delay="2000"
>
A simple dark alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
</template>
<script>
import { MDBAlert, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAlert,
MDBBtn
},
setup() {
const alert1 = ref(false);
const alert2 = ref(false);
const alert3 = ref(false);
const alert4 = ref(false);
const alert5 = ref(false);
const alert6 = ref(false);
const alert7 = ref(false);
const alert8 = ref(false);
return {
alert1,
alert2,
alert3,
alert4,
alert5,
alert6,
alert7,
alert8
};
}
};
</script>
Static examples
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<template>
<MDBAlert color="primary" static> A simple primary alert—check it out! </MDBAlert>
<MDBAlert color="secondary" static> A simple secondary alert—check it out! </MDBAlert>
<MDBAlert color="success" static> A simple success alert—check it out! </MDBAlert>
<MDBAlert color="danger" static> A simple danger alert—check it out! </MDBAlert>
<MDBAlert color="warning" static> A simple warning alert—check it out! </MDBAlert>
<MDBAlert color="info" static> A simple info alert—check it out! </MDBAlert>
<MDBAlert color="light" static> A simple light alert—check it out! </MDBAlert>
<MDBAlert color="dark" static> A simple dark alert—check it out! </MDBAlert>
</template>
<script>
import { MDBAlert } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAlert,
},
setup() {},
};
</script>
Link Color
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with an example link. Give it a
click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a
click if you like.
<template>
<MDBAlert color="primary" static>
A simple primary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="secondary" static>
A simple secondary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="success" static>
A simple success alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="danger" static>
A simple danger alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="warning" static>
A simple warning alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="info" static>
A simple info alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="light" static>
A simple light alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
<MDBAlert color="dark" static>
A simple dark alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</MDBAlert>
</template>
<script>
import { MDBAlert } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAlert,
},
setup() {},
};
</script>
Additional Content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<template>
<MDBAlert color="success" static>
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is
going to run a bit longer so that you can see how spacing within an alert works with
this kind of content.
</p>
<hr />
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</MDBAlert>
</template>
<script>
import { MDBAlert } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAlert,
},
setup() {},
};
</script>
Dismissing
Using the Vue alert component, it’s possible to dismiss any alert inline. Here’s how:
-
Add a
dismissproperty, which adds close button and extra padding to the right of the alert which positions the close button. - Click on the close button to dismiss the alert.
You can see this in action with a live demo:
Holy guacamole! You should check in on some of those fields below.
<template>
<MDBAlert dismiss :autohide="false" color="warning" static v-model="alert9">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</MDBAlert>
</template>
<script>
import { MDBAlert } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAlert,
},
setup() {
const alert9 = ref(true);
return {
alert9,
};
},
};
</script>
Show
You can manually show alert using show() method on the alert component ref.
Hidden alert!
<template>
<MDBBtn color="primary" @click="$refs.hiddenAlertRef.show()"> Show alert! </MDBBtn>
<MDBAlert
class="mt-3 text-center"
color="primary"
static
hidden
v-model="alert10"
ref="hiddenAlertRef"
>
Hidden alert!
</MDBAlert>
</template>
<script>
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
},
setup() {
const hiddenAlertRef = ref(null);
const alert10 = ref(false);
return {
hiddenAlertRef,
alert10,
};
},
};
</script>
Hide
You can manually hide alert using hide() method on alert component ref.
Hide me!
<template>
<MDBBtn color="primary" @click="$refs.showAlertRef.hide()"> Hide me! </MDBBtn>
<MDBAlert
class="text-center mt-3"
color="primary"
v-model="alert11"
static
:autohide="false"
ref="showAlertRef"
>
Hide me!
</MDBAlert>
</template>
<script>
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
},
setup() {
const showAlertRef = ref(null);
const alert11 = ref(true);
return {
showAlertRef,
alert11,
};
},
};
</script>
Placement
You can set the position of every alert using the
position property.
Select horizontal / vertical alignment
Current position: top-right
Show me wherever you want!
<template>
<div class="text-center">
<p class="fw-bold">Select horizontal / vertical alignment</p>
</div>
<div class="my-4 text-center">
<MDBBtn color="primary" @click="setVertical('top')">Top</MDBBtn>
<MDBBtn color="primary" class="ms-2" @click="setVertical('bottom')"> Bottom </MDBBtn>
</div>
<div class="my-4 text-center">
<MDBBtn color="primary" @click="setHorizontal('left')">Left</MDBBtn>
<MDBBtn color="primary" class="mx-2" @click="setHorizontal('center')">
Center
</MDBBtn>
<MDBBtn color="primary" @click="setHorizontal('right')"> Right </MDBBtn>
</div>
<div class="mb-4 text-center">
<h5>
Current position:
<span id="positionDisplay">{{ alert12position }}</span>
</h5>
</div>
<MDBBtn color="primary" @click="alert12 = true"> Show! </MDBBtn>
<MDBAlert
v-model="alert12"
width="250px"
:position="alert12position"
autohide
appendToBody
color="primary"
>
Show me wherever you want!
</MDBAlert>
</template>
<script>
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref, computed } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
},
setup() {
const alert12 = ref(false);
const vertical = ref('top');
const horizontal = ref('right');
const alert12position = computed(() => {
return `${vertical.value}-${horizontal.value}`;
});
const setHorizontal = (value) => {
horizontal.value = value;
};
const setVertical = (value) => {
vertical.value = value;
};
return {
alert12,
alert12position,
setHorizontal,
setVertical,
};
},
};
</script>
Container
You can display an alert anywhere. Just put it in your target element and fill the
data-mdb-container attribute with id or class of parent.
Hello from parent element!
<template>
<MDBContainer class="text-center" id="parent-container-example">
<MDBBtn color="primary" class="mb-5" @click="alert13 = true">
Show alert below!
</MDBBtn>
<MDBAlert
v-model="alert13"
autohide
:delay="5000"
position="top-right"
stacking
container="#parent-container-example"
color="primary"
>
Hello from parent element!
</MDBAlert>
</MDBContainer>
</template>
<script>
import { MDBAlert, MDBBtn, MDBContainer } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
MDBContainer,
},
setup() {
const alert13 = ref(false);
return {
alert13,
};
},
};
</script>
Offset
You can set offset of your alert using a
offset> property.
Offset: 100px
<template>
<MDBBtn color="primary" @click="alert14 = true"> Show alert with offset! </MDBBtn>
<MDBAlert
v-model="alert14"
offset="100"
autohide
:delay="5000"
position="top-right"
width="250px"
appendToBody
color="primary"
>
Offset: 100px
</MDBAlert>
</template>
<script>
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
},
setup() {
const alert14 = ref(false);
return {
alert14,
};
},
};
</script>
Stacking
You can turn on stacking your alerts using the
stacking property.
<template>
<MDBContainer class="text-center">
<MDBBtn color="primary" @click="addStacking">
Show notification
</MDBBtn>
<MDBAlert
v-model="stacking[1]"
color="primary"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
1. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[2]"
color="warning"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
2. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[3]"
color="info"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
3. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[4]"
color="success"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
4. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[5]"
color="secondary"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
5. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[6]"
color="danger"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
6. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[7]"
color="light"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
7. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[8]"
color="dark"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
8. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[9]"
color="primary"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
9. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stacking[10]"
color="warning"
position="bottom-right"
stacking
width="450px"
appendToBody
autohide
:delay="5000"
>
10. Stacking alert
</MDBAlert>
</MDBContainer>
</template>
<script>
import { MDBAlert, MDBBtn, MDBContainer } from "mdb-vue-ui-kit";
import { ref, reactive } from 'vue';
export default {
components: {
MDBAlert,
MDBBtn,
MDBContainer
},
setup() {
const stacking = reactive({
1: false,
2: false,
3: false,
4: false,
5: false,
6: false,
7: false,
8: false,
9: false,
10: false
});
const currentStacking = ref(1);
const addStacking = () => {
stacking[currentStacking.value] = true;
currentStacking.value++;
if (currentStacking.value > 10) {
currentStacking.value = 1;
}
};
return {
stacking,
addStacking
};
}
};
</script>
Stacking - Container
You can also stack alerts inside the container
<template>
<MDBContainer
class="text-center"
id="parent-stacking-container-example"
>
<MDBBtn color="primary" class="mb-5" @click="addStackingContainer">
Show notification
</MDBBtn>
<MDBAlert
v-model="stackingContainer[1]"
color="primary"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
1. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[2]"
color="warning"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
2. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[3]"
color="info"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
3. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[4]"
color="success"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
4. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[5]"
color="secondary"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
5. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[6]"
color="danger"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
6. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[7]"
color="light"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
7. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[8]"
color="dark"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
8. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[9]"
color="primary"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
9. Stacking alert
</MDBAlert>
<MDBAlert
v-model="stackingContainer[10]"
color="warning"
position="top-right"
stacking
container="#parent-stacking-container-example"
width="250px"
:appendToBody="false"
autohide
:delay="5000"
>
10. Stacking alert
</MDBAlert>
</MDBContainer>
</template>
<script>
import { MDBAlert, MDBContainer, MDBBtn } from "mdb-vue-ui-kit";
import { ref, reactive } from 'vue';
export default {
components: {
MDBAlert,
MDBContainer,
MDBBtn
},
setup() {
const stackingContainer = reactive({
1: false,
2: false,
3: false,
4: false,
5: false,
6: false,
7: false,
8: false,
9: false,
10: false
});
const currentStackingContainer = ref(1);
const addStackingContainer = () => {
stackingContainer[currentStackingContainer.value] = true;
currentStackingContainer.value++;
if (currentStackingContainer.value > 10) {
currentStackingContainer.value = 1;
}
};
return {
stackingContainer,
addStackingContainer
};
}
};
</script>
Alerts - API
Import
<script>
import {
MDBAlert
} from 'mdb-vue-ui-kit';
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBAlert element |
position
|
String | 'top-right' |
Sets a position for the alert. 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 alert |
stacking
|
Boolean | true |
Enables stacking alerts |
offset
|
String | '10 |
Changes alert 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 alert - primary | secondary | secondary | danger | warning | info | light | dark |
dismiss
|
Boolean | false |
Makes alert dismissible with close button |
animation
|
Boolean | true |
Allows to turn on or off the showing and hiding alert animation |
static
|
Boolean | false |
Makes alert static (open by default) |
hidden
|
Boolean | false |
Makes static alert hidden |
id
|
String | 'MDBAlert-generated id' |
Allows to add custom id to alert element |
v-model |
String | '' |
Returns current picked time |
Methods
| Name | Description | Example |
|---|---|---|
show |
Manually shows an alert |
alertRef.show()
|
hide |
Manually hides an alert |
alertRef.hide()
|
<template>
<MDBTimepicker v-model="alert1" ref="alertRef" />
<MDBBtn @click.stop="$refs.alertRef.show()" color="primary">
Show
</MDBBtn>
</template>
Events
| 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 |
<template>
<MDBTimepicker v-model="picker1" @close="doSomething" />
</template>