Vue Alert - Argon

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

Demo

Success! This is a primary alert—check it out!

1<template>
2  <argon-alert>
3    <strong>Primary!</strong> This is a primary alert—check it out!
4  </argon-alert>
5</template>
6
7<script>
8import ArgonAlert from "@/components/ArgonAlert.vue";
9export default {
10   components: {
11     ArgonAlert,
12   },
13 };
14</script>

<template>
  <argon-alert>
    <strong>Primary!</strong> This is a primary alert—check it out!
  </argon-alert>
</template>

<script>
import ArgonAlert from "@/components/ArgonAlert.vue";
export default {
   components: {
     ArgonAlert,
   },
 };
</script>

Props Information

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

With Icon

Info! This is an alert with Icon!

1<template>
2 <argon-alert color="info" icon="ni ni-like-2 ni-lg">
3   <strong>Primary!</strong> This is an alert with Icon!
4 </argon-alert>
5</template>
6
7<script>
8import ArgonAlert from "@/components/ArgonAlert.vue";
9export default {
10  components: {
11    ArgonAlert,
12  },
13 };
14</script>

<template>
 <argon-alert color="info" icon="ni ni-like-2 ni-lg">
   <strong>Primary!</strong> This is an alert with Icon!
 </argon-alert>
</template>

<script>
import ArgonAlert from "@/components/ArgonAlert.vue";
export default {
  components: {
    ArgonAlert,
  },
 };
</script>

Dismissible

Dark! This is a dismissible alert!

1<template>
2  <argon-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
3    <strong>Dark!</strong> This is a dismissible alert!
4  </argon-alert>  
5</template>
6
7<script>
8  import ArgonAlert from "@/components/ArgonAlert.vue";
9
10  export default {
11    components: {
12      ArgonAlert
13    },
14  }
15</script>

<template>
  <argon-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
    <strong>Dark!</strong> This is a dismissible alert!
  </argon-alert>  
</template>

<script>
  import ArgonAlert from "@/components/ArgonAlert.vue";

  export default {
    components: {
      ArgonAlert
    },
  }
</script>