Alert

Displays a callout for user attention. Inline notification with an optional leading icon, title, and description.

Default

Heads up!

You can add components to your app using the cli.

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

Destructive

Error

Your session has expired. Please log in again.

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

Without an icon

New release

v2.1 is out. Check the changelog for breaking changes.

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

Props

Component	Notable props
Alert	variant: "default" \| "destructive" (default "default"); role="alert" applied; …HTMLAttributes<HTMLDivElement>
AlertTitle	<h5> with text-base font-medium leading-5; …HTMLAttributes<HTMLHeadingElement>
AlertDescription	block container for body text (text-base leading-6); children may be inline or <p>…</p>

Source

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