Alert

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

const AlertDefault = () => (
  <Alert className="w-full max-w-md">
    <AlertTitle>Alert</AlertTitle>
    <AlertDescription>Default informational alert message.</AlertDescription>
  </Alert>
);

export default AlertDefault;

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

const AlertDefault = () => (
  <Alert className="w-full max-w-md">
    <AlertTitle>Alert</AlertTitle>
    <AlertDescription>Default informational alert message.</AlertDescription>
  </Alert>
);

export default AlertDefault;

import { InfoIcon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const AlertWithIcon = () => (
  <Alert className="w-full max-w-md">
    <InfoIcon />
    <AlertTitle>With Icon</AlertTitle>
    <AlertDescription>
      Add an icon as the first child to provide quick context.
    </AlertDescription>
  </Alert>
);

export default AlertWithIcon;

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

const AlertWithIconActionButtons = () => (
  <Alert className="w-full max-w-md">
    <ShieldAlertIcon />
    <AlertTitle>With Icon and Action Buttons</AlertTitle>
    <AlertDescription>
      Pair the action area with primary and secondary actions.
    </AlertDescription>
    <AlertAction>
      <Button size="xs" variant="outline">
        Dismiss
      </Button>
      <Button size="xs">Resolve</Button>
    </AlertAction>
  </Alert>
);

export default AlertWithIconActionButtons;

import { CheckCircle2Icon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const AlertSuccess = () => (
  <Alert className="w-full max-w-md" variant="success">
    <CheckCircle2Icon />
    <AlertTitle>Success Alert</AlertTitle>
    <AlertDescription>Your settings were saved successfully.</AlertDescription>
  </Alert>
);

export default AlertSuccess;

import { CircleAlertIcon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const AlertWarning = () => (
  <Alert className="w-full max-w-md" variant="warning">
    <CircleAlertIcon />
    <AlertTitle>Warning Alert</AlertTitle>
    <AlertDescription>
      Storage is almost full. Clean up large files.
    </AlertDescription>
  </Alert>
);

export default AlertWarning;

import { ShieldAlertIcon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";

const AlertError = () => (
  <Alert className="w-full max-w-md" variant="error">
    <ShieldAlertIcon />
    <AlertTitle>Error Alert</AlertTitle>
    <AlertDescription>Unable to connect to the API right now.</AlertDescription>
  </Alert>
);

export default AlertError;