Cognition

Components

Alert

Displays a callout for user attention. Use it for inline, persistent messages — not for transient toasts or blocking dialogs.

Preview

Rendered with live Cognition tokens — surface, border, and every variant color remap on theme change, no dark: classes.

Variants

<Alert>
  <CircleAlert />
  <AlertTitle>Changes saved</AlertTitle>
  <AlertDescription>Your edits are live.</AlertDescription>
</Alert>
<Alert variant="destructive">
  <CircleAlert />
  <AlertTitle>Something went wrong</AlertTitle>
  <AlertDescription>Your session has expired.</AlertDescription>
</Alert>
<Alert variant="warning">
  <TriangleAlert />
  <AlertTitle>Subscription expiring</AlertTitle>
  <AlertDescription>Renew within 3 days.</AlertDescription>
</Alert>

destructive recolors the title, description, and icon to the danger token; warning tints the surface amber — both via tokens, so dark mode is automatic.

Composition

AlertTitle and AlertDescription are both optional — drop the icon, the title, or both. With no icon the text fills the full width.

API

Part
Description
Alert
Root container. The variant prop ("default" | "destructive") sets the color.
AlertTitle
The bold heading line.
AlertDescription
Supporting body text beneath the title.

Don't and Do

Don't

Don't color the destructive alert with border-destructive dark:border-destructive — the legacy alert.tsx does exactly this. Hardcoded dark: classes drift the moment the brand changes.

Do
// One variant prop, token-driven, theme-agnostic
<Alert variant="destructive">…</Alert>
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { CircleAlert } from "lucide-react";

export function SavedAlert() {
  return (
    <Alert>
      <CircleAlert />
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your edits are live.</AlertDescription>
    </Alert>
  );
}

Drop the icon in as the first child — the [&>svg] rules position it and pad the text. Cognition tokens are baked in.

API matches fe-distillery/components/ui/alert.tsx — Alert, AlertTitle, AlertDescription with the variant axis. The source file's dark: class violations are replaced with Cognition tokens.