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.
<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>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
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);
</script>
Static examples
<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>
<script setup lang="ts">
import { MDBAlert } from 'mdb-vue-ui-kit';
</script>
Link Color
<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,
},
};
</script>
<script setup lang="ts">
import { MDBAlert } from 'mdb-vue-ui-kit';
</script>
Icons
Use Font Awesome Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
<template>
<MDBAlert color="primary" static>
<i class="fas fa-info-circle me-3"></i>A simple primary alert—check it out!
</MDBAlert>
<MDBAlert color="secondary" static>
<i class="fas fa-circle me-3"></i>A simple secondary alert—check it out!
</MDBAlert>
<MDBAlert color="success" static>
<i class="fas fa-check-circle me-3"></i>A simple success alert—check it out!
</MDBAlert>
<MDBAlert color="danger" static>
<i class="fas fa-times-circle me-3"></i>A simple danger alert—check it out!
</MDBAlert>
<MDBAlert color="warning" static>
<i class="fas fa-exclamation-triangle me-3"></i>A simple warning alert—check it out!
</MDBAlert>
<MDBAlert color="info" static>
<i class="fas fa-exclamation-triangle me-3"></i>A simple warning alert—check it out!
</MDBAlert>
<MDBAlert color="light" static>
<i class="fab fa-gratipay me-3"></i>A simple light alert—check it out!
</MDBAlert>
<MDBAlert color="dark" static>
<i class="fas fa-gem me-3"></i>A simple dark alert—check it out!
</MDBAlert>
</template>
<script>
import { MDBAlert } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAlert,
},
};
</script>
<script setup lang="ts">
import { MDBAlert } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAlert } from 'mdb-vue-ui-kit';
</script>
Dismissing
Using the Vue alert component, it’s possible to dismiss any alert inline. Here’s how:
-
Add a
dismiss
property, 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:
<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>
<script setup lang="ts">
import { MDBAlert } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const alert9 = ref(true);
</script>
Show
You can manually show alert using show()
method on the alert component ref.
<template>
<MDBBtn color="primary" @click="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>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const hiddenAlertRef = ref<InstanceType<typeof MDBAlert> | null>(null);
const alert10 = ref(false);
</script>
Hide
You can manually hide alert using hide()
method on alert component ref.
<template>
<MDBBtn color="primary" @click="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>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const showAlertRef = ref<InstanceType<typeof MDBAlert> | null>(null);
const alert11 = ref(true);
</script>
Placement
You can set the position of every alert using the
position
property.
Select horizontal / vertical alignment
Current position: top-right
<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>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref, computed } from 'vue';
const alert12 = ref(false);
const vertical = ref('top');
const horizontal = ref('right');
const alert12position = computed(() => {
return `${vertical.value}-${horizontal.value}`;
});
const setHorizontal = (value: string) => {
horizontal.value = value;
};
const setVertical = (value: string) => {
vertical.value = value;
};
</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.
<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>
<script setup lang="ts">
import { MDBAlert, MDBBtn, MDBContainer } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const alert13 = ref(false);
</script>
Offset
You can set offset of your alert using a
offset
> property.
<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>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const alert14 = ref(false);
</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>
<script setup lang="ts">
import { MDBAlert, MDBBtn, MDBContainer } from "mdb-vue-ui-kit";
import { ref, reactive } from 'vue';
interface StackingContainer {
[props: number]: boolean;
}
const stacking = reactive<StackingContainer>({
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;
}
};
</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>
<script setup lang="ts">
import { MDBAlert, MDBContainer, MDBBtn } from "mdb-vue-ui-kit";
import { ref, reactive } from 'vue';
interface StackingContainer {
[props: number]: boolean;
}
const stackingContainer = reactive<StackingContainer>({
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;
}
};
</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 |
heightAnimation
|
Boolean | false |
Animates alert height change |
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.value.show()
|
hide |
Manually hides an alert |
alertRef.value.hide()
|
<template>
<MDBBtn @click.stop="hiddenAlertRef?.show()" color="primary">
Show
</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();
const alert10 = ref(false);
return {
hiddenAlertRef,
alert10,
};
},
};
</script>
<script setup lang="ts">
import { MDBAlert, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const hiddenAlertRef = ref<InstanceType<typeof MDBAlert> | null>(null);
const alert10 = ref(false);
</script>
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>
CSS variables
As part of MDB’s evolving CSS variables approach, alerts now uses local CSS variables on
.alert
for enhanced real-time customization. Values for the CSS variables are set
via Sass, so Sass customization is still supported, too.
// .alert
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
// .alert-fixed
--#{$prefix}alert-fixed-z-index: #{$zindex-alert};
SCSS variables
$alert-zindex: 1070;
$alert-padding-y: 1.25rem;
$alert-padding-x: 1.5rem;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius-lg;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3;