Soft Alert

1import {
2  CircleFadingArrowUpIcon,
3  OctagonAlert,
4  ShieldAlert,
5} from "lucide-react";
6import { Alert, AlertTitle } from "@/registry/ui/alert";
7 
8export default function AlertCalloutDemo() {
9  return (
10    <div className="w-full space-y-4">
11      <Alert className="border-none bg-emerald-600/10 text-emerald-500 dark:bg-emerald-600/15">
12        <CircleFadingArrowUpIcon className="size-4" />
13        <AlertTitle>Your action has been completed successfully.</AlertTitle>
14      </Alert>
15      <Alert className="border-none bg-blue-500/10 text-blue-500 dark:bg-blue-600/20">
16        <CircleFadingArrowUpIcon className="size-4" />
17        <AlertTitle>A new version of the app is now available.</AlertTitle>
18      </Alert>
19      <Alert className="border-none bg-amber-600/10 text-amber-500 dark:bg-amber-600/15">
20        <ShieldAlert className="size-4" />
21        <AlertTitle>Changes will overwrite existing data.</AlertTitle>
22      </Alert>
23      <Alert className="border-none bg-destructive/10 text-destructive dark:bg-destructive/15">
24        <OctagonAlert className="size-4" />
25        <AlertTitle>
26          Unable to process your request. Please try again later.
27        </AlertTitle>
28      </Alert>
29    </div>
30  );
31}