Alert

Copy<script setup lang="ts">
import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert>
      <CheckCircle2Icon />
      <AlertTitle>Success! Your changes have been saved</AlertTitle>
      <AlertDescription>
        This is an alert with icon, title and description.
      </AlertDescription>
    </Alert>

    <Alert>
      <PopcornIcon />
      <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
    </Alert>

    <Alert variant="destructive">
      <AlertCircleIcon />
      <AlertTitle>Unable to process your payment.</AlertTitle>
      <AlertDescription>
        <p>Please verify your billing information and try again.</p>
        <ul class="mt-2 list-inside list-disc space-y-1">
          <li>Check your card details</li>
          <li>Ensure sufficient funds</li>
          <li>Verify billing address</li>
        </ul>
      </AlertDescription>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import {
  AlertCircleIcon,
  AlertTriangleIcon,
  CheckCircle2Icon,
  InfoIcon,
  SparklesIcon,
  XCircleIcon,
} from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert>
      <AlertCircleIcon />
      <AlertTitle>Default</AlertTitle>
      <AlertDescription>
        This is the default alert variant.
      </AlertDescription>
    </Alert>

    <Alert variant="primary">
      <SparklesIcon />
      <AlertTitle>Primary</AlertTitle>
      <AlertDescription>
        Use for important announcements or highlights.
      </AlertDescription>
    </Alert>

    <Alert variant="secondary">
      <InfoIcon />
      <AlertTitle>Secondary</AlertTitle>
      <AlertDescription>
        A subtle variant for less prominent messages.
      </AlertDescription>
    </Alert>

    <Alert variant="info">
      <InfoIcon />
      <AlertTitle>Info</AlertTitle>
      <AlertDescription>
        Informational messages for the user.
      </AlertDescription>
    </Alert>

    <Alert variant="positive">
      <CheckCircle2Icon />
      <AlertTitle>Positive</AlertTitle>
      <AlertDescription>
        Success messages and confirmations.
      </AlertDescription>
    </Alert>

    <Alert variant="warning">
      <AlertTriangleIcon />
      <AlertTitle>Warning</AlertTitle>
      <AlertDescription>
        Warnings that require attention.
      </AlertDescription>
    </Alert>

    <Alert variant="destructive">
      <XCircleIcon />
      <AlertTitle>Destructive</AlertTitle>
      <AlertDescription>
        Error messages and critical alerts.
      </AlertDescription>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert variant="info">
      <AlertIcon />
      <AlertContent>
        <AlertTitle>New Feature Available</AlertTitle>
        <AlertDescription>
          Check out the new dashboard with improved analytics.
        </AlertDescription>
      </AlertContent>
    </Alert>

    <Alert variant="positive">
      <AlertIcon />
      <AlertContent>
        <AlertTitle>Order Confirmed</AlertTitle>
        <AlertDescription>
          Your order #12345 has been successfully placed.
        </AlertDescription>
      </AlertContent>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import { AlertCircleIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <Alert variant="destructive">
    <AlertCircleIcon />
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
      Your session has expired. Please log in again.
    </AlertDescription>
  </Alert>
</template>