Alert

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

GitHub

Demo

Alert style

Success Heading

Success Message

Warning Heading

Warning Message

Error Heading

Error Message

Information Heading

Information Message

Secondary Heading

Secondary Message

Toast style

Success Heading

Success Message

Warning Heading

Warning Message

Error Heading

Error Message

Information Heading

Information Message

Secondary Heading

Secondary Message

Small style

Success Message

Warning Message

Error Message

Information Message

Secondary Message

Install

npm i @vuesimple/vs-alert

Usage

<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

<script>
  import VsAlert from '@vuesimple/vs-alert';

  export default {
    components: {
      VsAlert,
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-alert@3.1.7/dist/index.min.js"></script>

// Main/Entry file
app.use(VsAlert.plugin);

<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

Props

Name	Type	Default	Description
variant	String	-	Type of alert to be shown. (success, warning, error, info)
title	String	-	The alert title (text only). For HTML, use the header slot.
showClose	Boolean	false	Show alert close icon
small	Boolean	false	Applies reduced padding
toast	Boolean	false	Applies toast design
noBg	Boolean	false	Remove background color

Events

Name	Description
close	Emitted when the alert close icons is clicked. Listen for it using @close.

Slots

You can define own item markup via #slot-name:

Name	Description
(default)	Holds the alert content and can contain HTML.
icon	Slot to add custom icon for type
title	Slot to add custom title

Example (Slot Title)

<vs-alert variant="success">
  <template #title>Success Heading</template>
  Success Message
</vs-alert>