Nuxt 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!

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

1<template>
2  <ArgonAlert>
3    <strong>Primary!</strong> This is a primary alert—check it out!
4  </ArgonAlert>
5</template>

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!

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

1<template>
2 <ArgonAlert color="info" icon="like-2 ni-lg">
3   <strong>Primary!</strong> This is an alert with Icon!
4 </ArgonAlert>
5</template>

Dismissible

Dark! This is a dismissible alert!

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

1<template>
2  <ArgonAlert color="dark" icon="like-2 ni-lg" dismissible>
3    <strong>Dark!</strong> This is a dismissible alert!
4  </ArgonAlert>  
5</template>