Alert
Alert is a component that displays a message to the user.
Theme Color Alerts
<template>
<!-- Basic alert -->
<div>
<Alert type="dark"> This is an alert. Check it out! </Alert>
</div>
<!-- Dismissible alert -->
<div>
<Alert type="dark" dismissible> This is a dismissible alert. Check it out! </Alert>
</div>
<!-- Alert with icon -->
<div>
<Alert type="dark" icon="fluent:target-20-regular"> This is a dismissible alert. Check it out! </Alert>
</div>
</template>
<script setup>
import Alert from "@/components/Alert";
</script>
TIP
You can use type props for alert type. Available types: type="dark", type="primary", type="secondary", type="success", type="info", type="danger", type="warning",
Light Color Alerts
Just add light to the type. For example: type="primary-light", type="secondary-light", type="success-light", type="info-light", type="danger-light", type="warning-light",
Outline Alerts
Just add outline to the type. For example: type="primary-outline", type="secondary-outline", type="success-outline", type="info-outline", type="danger-outline", type="warning-outline",
Dismissible
You can use dismissible props to make an alert dismissible.
Icon
You can use icon="fluent:target-20-regular props to add an icon on the alert component.