# Alert

> An inline, non-dismissable notice (`role="alert"`) with an optional icon, a one-line title and a description.

## Facts

- **Product**: Crew OS
- **Family**: Feedback
- **Global**: `window.DigitalCrew.Alert`
- **Source**: `digitalcrew-orchestrator: components/ui/alert.tsx`
- **Import in the app**: `import { Alert } from "@/components/ui/alert";`
- **Live preview**: /design/components/alert/preview.html
- **Page**: /design/components/alert

## Guidelines

**Use it for** state the user should know about on the page they are on: a mailbox still warming up, an expired integration, a paused campaign. For transient confirmations use a toast; for a decision, a dialog.

**What you provide**: `variant` (`default`, `destructive`; default `default`), then children in this order: an optional Lucide icon as the first child, `AlertTitle`, `AlertDescription` (wrap body copy in `<p>` to get `leading-relaxed`).

**Anatomy**: full width, `rounded-lg`, 1px `border`, `px-4 py-3`, `text-sm`, on `bg-card`. With an icon the grid becomes a 16px column plus content with a 12px gap (`gap-x-3`); the icon is `size-4`, nudged down 2px, in `currentColor`. The title is `font-medium tracking-tight` and clamped to one line; the description is `text-muted-foreground` with a 4px gap between paragraphs. `destructive` turns the text and icon `text-destructive` and the description `text-destructive/90`, keeping the card background.

**Behaviour**: static, no motion.

**Don't** put actions or long lists inside, stack more than two alerts, or use `destructive` for warnings that are not failures.

## API

```ts
declare const alertVariants: (props?: {
    variant?: "default" | "destructive";
} & ClassProp) => string;
declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): any;
declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): any;
declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): any;
export { Alert, AlertTitle, AlertDescription };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid max-w-xl gap-3" },
      h(DC.Alert, null,
        h(I.Info),
        h(DC.AlertTitle, null, "Mailbox warm-up in progress"),
        h(DC.AlertDescription, null, h("p", null, "Sending from claire@northwind-traders.com is capped at 40 emails a day until day 14 of warm-up."))),
      h(DC.Alert, { variant: "destructive" },
        h(I.AlertTriangle),
        h(DC.AlertTitle, null, "Gmail connection expired"),
        h(DC.AlertDescription, null, h("p", null, "The Q3 CFO outreach campaign is paused. Reconnect the mailbox to resume sending."))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Feedback

- [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md): A circular gauge for a value against a quota, with the number in the middle.
- [HelpTooltip](/design/components/help-tooltip.md): A 16px `HelpCircle` in `muted-foreground` that shows an explanation on hover or focus.
- [Progress](/design/components/progress.md): A determinate bar: `primary` fill on `primary` at 20%, 8px tall, `r-full`.
- [Skeleton](/design/components/skeleton.md): A placeholder block that pulses (`t-skel-pulse`, 1s) in `accent` while content loads.
- [Toaster](/design/components/toaster.md): Toast notifications (Sonner) on the `popover` surface with a `border` and `radius-lg`; mount one `Toaster` at the root and call `toast()` from anywhere.