Alert

The VAlert component is designed to display alert messages with different variants such as error, success, and info. It can include a title, description, and an optional button for user interaction. Location - ui-kit/src/components/VAlert.vue This component based on components from shadcn

Features

• Variants: Supports multiple alert types including error, success, and info.
• Customizable Button: Optionally includes a button that can trigger events.
• Dynamic Icons: Displays different icons based on the alert variant.

Importing the Component

To use the VAlert component, import it as follows:

import VAlert from 'UiKit/components/VAlert.vue';

Component Props

The component accepts the following props:

Default Slot

The VAlert component supports named slots for customizing the title and description.

Full Example

<script setup lang="ts">
import VAlert from 'UiKit/components/VAlert.vue';
</script>

<template>
  <VAlert variant="success" buttonText="Okay" @click="handleClick">
    <template #title>
      Success!
    </template>
    <template #description>
      Your operation was successful.
    </template>
  </VAlert>
</template>