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
AlertTitle
AlertDescription
For the complete protocol schema, see Alert, AlertTitle, AlertDescription.