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.

Props Information

color'primary''secondary''info''success''warning''danger''light''dark'successChange the SoftAlert background color.
iconStringused to set icon to the SoftAlert.
dismissibleboolfalseIf true the SoftAlert will have a closing button for dismissing it.
slotnodeThe 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.


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.