Alert

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

export default function Example() {
  return (
    <div style={{ width: 440, display: "grid", gap: 12 }}>
      <Alert type="info" title="Heads up">Orders after 4 pm ship tomorrow.</Alert>
      <Alert type="success" title="Order placed">We have sent the receipt to your phone.</Alert>
      <Alert type="warning" title="Low stock">Only 3 tins of Darjeeling are left.</Alert>
      <Alert type="error" title="Payment failed">Your bKash payment did not go through.</Alert>
    </div>
  );
}

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

export default function Example() {
  return (
    <div style={{ width: 440, display: "grid", gap: 12 }}>
      <Alert appearance="subtle" type="info" title="Subtle">Soft background, the default.</Alert>
      <Alert appearance="accent" type="info" title="Accent">A coloured edge on the side.</Alert>
      <Alert appearance="solid" type="info" title="Solid">Full colour for the most important notes.</Alert>
      <Alert appearance="outline" type="info" title="Outline">Only a border, no fill.</Alert>
    </div>
  );
}

import * as React from "react";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export default function Example() {
  const [open, setOpen] = React.useState(true);
  if (!open) return <Button variant="outline" onClick={() => setOpen(true)}>Show the alert again</Button>;
  return (
    <div style={{ width: 440, maxWidth: "100%" }}>
      <Alert type="warning" title="Your cart expires soon" onClose={() => setOpen(false)} actions={<Button size="sm" variant="outline">Check out</Button>}>
        Items are held for 15 minutes.
      </Alert>
    </div>
  );
}