Skip to main content
Alerts draw attention to important information. They pair a title with a description and use color variants to signal intent.

​
Basic Usage

​
With Icons

Pass an icon prop to render a lucide icon alongside the alert content. The icon automatically aligns with the title and description.

​
Variants

Five variants cover different semantic intents — from neutral information to success confirmations and error states.

​
Without Title

For simple messages, you can use just a description:

​
In Context

Alerts work well inside cards or at the top of a page to communicate status:

​
API Reference

Alert Parameters

​
variant
str
default:"default"
Visual style: "default", "destructive", "success", "warning", "info".
​
icon
str | None
default:"None"
Lucide icon name in kebab-case (e.g., "circle-alert", "circle-check"). Browse icons at lucide.dev/icons.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

AlertTitle Parameters

​
content
str
required
Title text. Can be passed as a positional argument.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

AlertDescription Parameters

​
content
str
required
Description text. Can be passed as a positional argument.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Alert
{
  "type": "Alert",
  "children?": "[Component]",
  "variant?": "default | destructive | success | warning | info",
  "icon?": "string",
  "cssClass?": "string"
}
AlertTitle
{
  "type": "AlertTitle",
  "content": "string (required)",
  "cssClass?": "string"
}
AlertDescription
{
  "type": "AlertDescription",
  "content": "string (required)",
  "cssClass?": "string"
}
For the complete protocol schema, see Alert, AlertTitle, AlertDescription.