Alert

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

<Alert variant="info">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>

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

export function Example() {
  return (
    <Alert variant="info">
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        A simple alert with an "AlertTitle" and an
        "AlertDescription".
      </AlertDescription>
    </Alert>
  );
}

---
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
import Flame from "@tabler/icons/outline/flame.svg";
---

<Alert variant="error">
  <AlertTitle><Flame />Danger!</AlertTitle>
  <AlertDescription>
    This action is destructive and may have unintended consequences.
  </AlertDescription>
</Alert>

import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
import { IconFlame as Flame } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Alert variant="error">
        <AlertTitle><Flame />Danger!</AlertTitle>
        <AlertDescription>
          This action is destructive and may have unintended consequences.
        </AlertDescription>
      </Alert>
    </>
  );
}

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

<Alert variant="default">
  <AlertTitle>variant="default"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="primary">
  <AlertTitle>variant="primary"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="secondary">
  <AlertTitle>variant="secondary"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="info">
  <AlertTitle>variant="info"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="success">
  <AlertTitle>variant="success"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="warning">
  <AlertTitle>variant="warning"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="error">
  <AlertTitle>variant="error"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>

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

export function Example() {
  return (
    <>
      <Alert variant="default">
        <AlertTitle>variant="default"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="primary">
        <AlertTitle>variant="primary"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="secondary">
        <AlertTitle>variant="secondary"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="info">
        <AlertTitle>variant="info"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>variant="success"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>variant="warning"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
      <Alert variant="error">
        <AlertTitle>variant="error"</AlertTitle>
        <AlertDescription>
          A simple alert with an "AlertTitle" and an
          "AlertDescription".
        </AlertDescription>
      </Alert>
    </>
  );
}