The alert component displays important messages or feedback to users with styling appropriate for the context.

Options

• :variant - The visual style of the alert. Available variants:
  • "default" - Standard alert styling (default)
  • "destructive" - Red-tinted styling for errors and warnings
• :class - Additional CSS classes to apply to the alert container.

Examples

<.alert>
  <.alert_title>Information</.alert_title>
  <.alert_description>This is an informational message.</.alert_description>
</.alert>

<.alert variant="destructive" class="mt-4">
  <.alert_title>Warning</.alert_title>
  <.alert_description>This action cannot be undone.</.alert_description>
</.alert>