Alert
Displays a callout for user attention, with optional destructive styling.
Your changes are saved
Everyone with access can see the update.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/alert.jsonUsage
Use alert to surface important, non-blocking information inline with the page content, such as
form validation summaries or status messages. Pass an icon as the first child to get the built-in
two-column layout, and use variant="destructive" for errors.
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircleIcon } from "@lucide/vue";
</script>
<template>
<Alert variant="destructive">
<AlertCircleIcon />
<AlertTitle>Unable to process payment</AlertTitle>
<AlertDescription>Please verify your billing information and try again.</AlertDescription>
</Alert>
</template>