Vue Alert - Material

Provide contextual feedback messages for typical user actions with the handful of available and flexible alerts/notifications.

Demo

A simple success alert—check it out!

<script setup>
// Vue Material Kit 2 component
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>
 <MaterialAlert color="success" fontWeight="bold">
 A simple success alert-check it out!
</MaterialAlert>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAlert from "@/components/MaterialAlert.vue";
4</script>
5<template>
6 <MaterialAlert color="success" fontWeight="bold">
7 A simple success alert-check it out!
8</MaterialAlert>
9</template>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `MaterialAlert` background color.
fontWeight	String		used to set `MaterialAlert` font weight.
dismissible	bool	false	If `true` the `MaterialAlert` will have a closing button for dismissing it.
slot	node		The `MaterialAlert` has a default slot that you can pass node or content inside it.

With Links

A simple primary alert with an example link. Give it a click if you like.

<script setup>
// Vue Material Kit 2 component
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>
 <MaterialAlert color="primary">
 A simple primary alert with
 <a href="javascript:;" class="alert-link text-white">an example link</a
 >. Give it a click if you like.
</MaterialAlert>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAlert from "@/components/MaterialAlert.vue";
4</script>
5<template>
6 <MaterialAlert color="primary">
7 A simple primary alert with
8 <a href="javascript:;" class="alert-link text-white">an example link</a
9 >. Give it a click if you like.
10</MaterialAlert>
11</template>

With Content

Good job!

That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.

What else could rust the heart more over time? Blackgold.

<script setup>
// Vue Material Kit 2 component
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>
 <MaterialAlert color="success">
  <h4 class="alert-heading">Good job!</h4>
  <p>
    That’s the main thing people are controlled by! Thoughts- their
    perception of themselves! They&#39;re slowed down by their perception
    of themselves. If you&#39;re taught you can&#39;t do anything, you
    won&#39;t do anything. I was taught I could do everything.
  </p>
  <hr class="horizontal light" />
  <p class="mb-0">
    What else could rust the heart more over time? Blackgold.
  </p>
 </MaterialAlert>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAlert from "@/components/MaterialAlert.vue";
4</script>
5<template>
6 <MaterialAlert color="success">
7  <h4 class="alert-heading">Good job!</h4>
8  <p>
9    That’s the main thing people are controlled by! Thoughts- their
10    perception of themselves! They&#39;re slowed down by their perception
11    of themselves. If you&#39;re taught you can&#39;t do anything, you
12    won&#39;t do anything. I was taught I could do everything.
13  </p>
14  <hr class="horizontal light" />
15  <p class="mb-0">
16    What else could rust the heart more over time? Blackgold.
17  </p>
18 </MaterialAlert>
19</template>

Dismissible

Holy molly! You should check in on some of those fields below.

<script setup>
// Vue Material Kit 2 component
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>
 <MaterialAlert color="warning" dismissible>
  <strong>Holy molly!</strong> You should check in on some of those fields
  below.
 </MaterialAlert> 
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAlert from "@/components/MaterialAlert.vue";
4</script>
5<template>
6 <MaterialAlert color="warning" dismissible>
7  <strong>Holy molly!</strong> You should check in on some of those fields
8  below.
9 </MaterialAlert> 
10</template>