Alert

Inline message block.

stable

Preview

Maintenance window

The status feed will pause between 02:00 and 02:30 UTC.

Connection lost

Retrying every 5 seconds.

Code

tsx

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

export function Example() {
  return (
    <div className="space-y-3">
      <Alert variant="info">
        <AlertTitle>Maintenance window</AlertTitle>
        <AlertDescription>
          The status feed will pause between 02:00 and 02:30 UTC.
        </AlertDescription>
      </Alert>
      <Alert variant="danger">
        <AlertTitle>Connection lost</AlertTitle>
        <AlertDescription>Retrying every 5 seconds.</AlertDescription>
      </Alert>
    </div>
  );
}

Props

Prop	Type	Default	Description
variant	`"default" \| "info" \| "success" \| "warning" \| "danger"`	"default"	Severity tone.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Sub-components

AlertTitle— Short headline.

AlertDescription— Body text.

Root renders with `role="alert"` — screen readers announce on mount.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/alert.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { type HTMLAttributes, forwardRef } from "react";

const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg~*]:pl-7",
  {
    variants: {
      variant: {
        default: "border-border bg-surface text-fg",
        info: "border-[oklch(58.8%_0.158_241.97_/_0.30)] bg-[oklch(68.5%_0.169_237.32_/_0.10)] text-info [&>svg]:text-info",
        success:
          "border-[oklch(62.7%_0.194_149.21_/_0.30)] bg-[oklch(72.3%_0.219_149.58_/_0.10)] text-success [&>svg]:text-success",
        warning:
          "border-[oklch(66.6%_0.179_58.32_/_0.30)] bg-[oklch(76.9%_0.188_70.08_/_0.10)] text-warning [&>svg]:text-warning",
        danger:
          "border-[oklch(57.7%_0.245_27.32_/_0.30)] bg-[oklch(63.7%_0.237_25.33_/_0.10)] text-danger [&>svg]:text-danger",
      },
    },
    defaultVariants: { variant: "default" },
  },
);

export interface AlertProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof alertVariants> {}

export const Alert = forwardRef<HTMLDivElement, AlertProps>(
  ({ className, variant, ...props }, ref) => (
    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
  ),
);
Alert.displayName = "Alert";

export const AlertTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5
      ref={ref}
      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
      {...props}
    />
  ),
);
AlertTitle.displayName = "AlertTitle";

export const AlertDescription = forwardRef<
  HTMLParagraphElement,
  HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm leading-relaxed [&_p]:leading-relaxed", className)}
    {...props}
  />
));
AlertDescription.displayName = "AlertDescription";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmAlert (extends HBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmAlert;

PrizmAlert()
PrizmAlert(Variant variant, String titleText, String bodyText)

Prop	Type	Default	Description
Variant	`enum { DEFAULT, INFO, SUCCESS, WARNING, DANGER }`	DEFAULT	Status variant; sets the border and title colour.
setVariant	`(Variant) → void`	—	Swap the variant.
setTitle	`(String) → void`	—	Set the title (hidden if empty).
setBody	`(String) → void`	—	Set the description (hidden if empty).
setIcon	`(Node) → void`	—	Optional leading icon; colour it yourself. Pass null to remove.

A composite over HBox (no stock 1:1 control), styled by the .prizm-alert rules. Each variant tints the background + border and colours the whole text, mirroring the web; since JavaFX CSS can't alpha-mix a looked-up colour, the tints are precomputed (status over bg) as -color-<status>-subtle / -border tokens by the theme generator. Mirrors Alert + AlertTitle + AlertDescription in components/ui/alert.tsx.