Alert

TSX
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function AlertDemo() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <Alert>
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          You can add components to your app using the shadcn CLI.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Something went wrong</AlertTitle>
        <AlertDescription>Your session has expired.</AlertDescription>
      </Alert>
    </div>
  );
}

TSX
"use client";

import { CheckCircle2Icon, XIcon } from "lucide-react";

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export default function AlertActionDemo() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <Alert>
        <CheckCircle2Icon />
        <AlertTitle>Backup completed</AlertTitle>
        <AlertDescription>
          Snapshot stored two minutes ago.
        </AlertDescription>
        <AlertAction>
          <Button variant="ghost" size="icon-xs" aria-label="Dismiss">
            <XIcon />
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Conversation deleted</AlertTitle>
        <AlertDescription>This action can be reverted.</AlertDescription>
        <AlertAction>
          <Button variant="outline" size="xs">
            Undo
          </Button>
        </AlertAction>
      </Alert>
    </div>
  );
}