Vue Alert - Soft UI

Get started on your web projects with our Vue.js alerts which provide contextual feedback messages for typical user actions.

An alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

Below we are presenting examples of alerts that you can use in your Vue project. The examples come in different colors and styles so you can adapt them easily to your needs.

Default Alert

Use this example to create a simple and versatile alert.

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

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

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

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

Props Information

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

With Icon

Use the following example of alert with icon that makes the message more explicit.

Info! This is an alert with Icon!

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

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

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

Dismissible

Use the following dismissible alert if you want to let users close the alert after they read it. This is a more user-friendly way.

Dark! This is a dismissible alert!

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

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

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