Alert

Component for displaying feedback messages

Basic Usage

Supports four types via the type prop: success, warning, danger, and info. Defaults to info.

this is the alert

this is the alert

this is the alert

this is the alert

<template>
    <Alert type="success" closable>this is the alert</Alert>
    <Alert type="warning" closable>this is the alert</Alert>
    <Alert type="info" closable>this is the alert</Alert>
    <Alert type="danger" closable>this is the alert</Alert>
</template>

<script setup lang="ts">
import Alert from '@/components/Alert/Alert.vue'
</script>

Theme Types

this is the alert

this is the alert

this is the alert

this is the alert

<template>
    <Alert type="success" effect="dark" closable>this is the alert</Alert>
    <Alert type="warning" effect="dark" closable>this is the alert</Alert>
    <Alert type="info" effect="dark" closable>this is the alert</Alert>
    <Alert type="danger" effect="dark" closable>this is the alert</Alert>
</template>

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>

Closable

without close

<template>
  <Alert type="success" :closable="false">without close</Alert>
</template>

<script setup>
import Alert from '@/components/Alert/Alert.vue'
</script>

Function Mode

Use the createAlert() utility to trigger alerts programmatically.

<template>
  <Button type="success" @click="handleClick">Click me</Button>
</template>
<script setup lang="ts">
import { createAlert } from '@/components/Alert/createAlert'
import Button from '@/components/Button/Button.vue'
const handleClick = () => {
  createAlert({
    type: 'success',
    message: 'Funtional Alert!',
    closable: true,
    duration: 3000
  })
}
</script>

API

Alert Attributes

Attribute	Description	Type	Default
type	Theme type	success | warning | danger | info	info
effect	Style theme	light | dark	light
closable	Whether it is closable	boolean	false
duration	Auto-close delay in ms (0 disables)	number	3000
message	Message content (VNode or string)	string | VNode	—

Alert Events

Event	Description	Parameters
close	Trigger on close	-

Alert Slots

Name	Description
default	Custom content