Skip to content
On this page


Alert is a component that displays a message to the user.

Theme Color Alerts

  <!-- Basic alert -->
    <Alert type="dark"> This is an alert. Check it out! </Alert>
  <!-- Dismissible alert -->
    <Alert type="dark" dismissible> This is a dismissible alert. Check it out! </Alert>
  <!-- Alert with icon -->
    <Alert type="dark" icon="fluent:target-20-regular"> This is a dismissible alert. Check it out! </Alert>
<script setup>
import Alert from "@/components/Alert";


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",


You can use dismissible props to make an alert dismissible.


You can use icon="fluent:target-20-regular props to add an icon on the alert component.

COPYRIGHT © 2022 Codeshaper, All rights reserved.