Salad UI

Alert

Renders an alert container.

Read more Read less

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>
Default alert Open in playground 
<.alert>
  <.icon name="hero-command-line" class="h-4 w-4" />
  <.alert_title>Heads up!</.alert_title>
  <.alert_description>
    You can add components to your app using the cli
  </.alert_description>
</.alert>
Destructive Open in playground 
<.alert variant="destructive">
  <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
  <.alert_title>Heads up!</.alert_title>
  <.alert_description>
    You can add components to your app using the cli
  </.alert_description>
</.alert>