Alert

A persistent, inline callout that holds a message in place on the page — an optional leading icon, a title, and a description. Reach for it to surface context the user should read before acting (a warning above a form, a tip in a settings panel, an error after a failed save). Use Toast instead for transient, self-dismissing feedback, and Badge for a short inline status label rather than a full message.

variant="default" is the neutral informational tone (card surface, border); use variant="destructive" only when something failed or needs urgent attention. There is no size prop — Alert is a single fixed size that spans the width of its container.

Default

<Alert>
  <TerminalIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

Destructive

<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

Without an icon

<Alert>
  <AlertTitle>New release</AlertTitle>
  <AlertDescription>
    v2.1 is out. Check the changelog for breaking changes.
  </AlertDescription>
</Alert>

Props

ComponentNotable props
Alertvariant: "default" | "destructive" (default "default"); role="alert" applied; …HTMLAttributes<HTMLDivElement>
AlertTitle<h5> with text-base font-medium leading-5; …HTMLAttributes<HTMLHeadingElement>
AlertDescriptionblock container for body text (text-base leading-relaxed); children may be inline or <p>…</p>

Source

packages/react/src/components/alert.tsx · Figma node 2813:9374