Alert

1
import { CheckCircle2Icon, InfoIcon } from "lucide-solid";
2
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3

4
export default function AlertDemo() {
5
  return (
6
    <div class="grid w-full max-w-md items-start gap-4">
7
      <Alert>
8
        <CheckCircle2Icon />
9
        <AlertTitle>Payment successful</AlertTitle>
10
        <AlertDescription>
11
          Your payment of $29.99 has been processed. A receipt has been sent to your email address.
12
        </AlertDescription>
13
      </Alert>
14
      <Alert>
15
        <InfoIcon />
16
        <AlertTitle>New feature available</AlertTitle>
17
        <AlertDescription>
18
          We&apos;ve added dark mode support. You can enable it in your account settings.
19
        </AlertDescription>
20
      </Alert>
21
    </div>
22
  );
23
}

1
import { CheckCircle2Icon } from "lucide-solid";
2
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3

4
export default function AlertBasic() {
5
  return (
6
    <Alert class="max-w-md">
7
      <CheckCircle2Icon />
8
      <AlertTitle>Account updated successfully</AlertTitle>
9
      <AlertDescription>
10
        Your profile information has been saved. Changes will be reflected immediately.
11
      </AlertDescription>
12
    </Alert>
13
  );
14
}

1
import { AlertCircleIcon } from "lucide-solid";
2
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3

4
export default function AlertDestructive() {
5
  return (
6
    <Alert variant="destructive" class="max-w-md">
7
      <AlertCircleIcon />
8
      <AlertTitle>Payment failed</AlertTitle>
9
      <AlertDescription>
10
        Your payment could not be processed. Please check your payment method and try again.
11
      </AlertDescription>
12
    </Alert>
13
  );
14
}

1
import { Alert, AlertAction, AlertDescription, AlertTitle } from "~/components/ui/alert";
2
import { Button } from "~/components/ui/button";
3

4
export default function AlertActionExample() {
5
  return (
6
    <Alert class="max-w-md">
7
      <AlertTitle>Dark mode is now available</AlertTitle>
8
      <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
9
      <AlertAction>
10
        <Button size="xs">Enable</Button>
11
      </AlertAction>
12
    </Alert>
13
  );
14
}

1
import { AlertTriangleIcon } from "lucide-solid";
2
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3

4
export default function AlertColors() {
5
  return (
6
    <Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
7
      <AlertTriangleIcon />
8
      <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
9
      <AlertDescription>
10
        Renew now to avoid service interruption or upgrade to a paid plan to continue using the
11
        service.
12
      </AlertDescription>
13
    </Alert>
14
  );
15
}