Alert

A dismissible alert banner for surfacing status messages, warnings, or announcements with an icon, title, description, and optional actions.

@delego

byappica-dev

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert";
import {
  Bell,
  Sparkle,
  InfoCircleFilled,
  CircleCheckFilled,
  AlertTriangleFilled,
  CircleXFilled,
} from "@appica/icons-react";

const VARIANTS = [
  {
    variant: "default",
    icon: Bell,
    title: "Update available",
    desc: "Version 2.4 is ready to install.",
  },
  {
    variant: "primary",
    icon: Sparkle,
    title: "New feature",
    desc: "You can now schedule reports to run weekly.",
  },
  {
    variant: "secondary",
    icon: InfoCircleFilled,
    title: "Did you know?",
    desc: "Press ⌘K to search from anywhere.",
  },
  {
    variant: "info",
    icon: InfoCircleFilled,
    title: "Maintenance window",
    desc: "We will be offline Sunday 02:00-03:00 UTC.",
  },
  {
    variant: "success",
    icon: CircleCheckFilled,
    title: "Payment received",
    desc: "Your invoice has been settled.",
  },
  {
    variant: "warning",
    icon: AlertTriangleFilled,
    title: "Storage almost full",
    desc: "You have used 92% of your quota.",
  },
  {
    variant: "error",
    icon: CircleXFilled,
    title: "Payment failed",
    desc: "We could not charge your card on file.",
  },
] as const;

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {VARIANTS.map(({ variant, icon: Icon, title, desc }) => (
        <Alert key={variant} variant={variant}>
          <AlertIcon>
            <Icon />
          </AlertIcon>
          <AlertTitle>{title}</AlertTitle>
          <AlertDescription>{desc}</AlertDescription>
        </Alert>
      ))}
    </div>
  );
}