View Source SaladUI.Alert (SaladUI v1.0.0-beta.3)

Implementation of alert component for displaying important messages to users.

Alerts are used to communicate status, warnings, or contextual feedback to users. They can be configured with different variants to indicate severity and typically consist of a title and a description.

Examples:

<.alert>
  <.alert_title>Note</.alert_title>
  <.alert_description>This is a standard informational alert.</.alert_description>
</.alert>

<.alert variant="destructive">
  <.alert_title>Error</.alert_title>
  <.alert_description>
    There was a problem with your request. Please try again.
  </.alert_description>
</.alert>

<.alert>
  <span class="mr-3">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 12l2 2l4-4"></path>
    </svg>
  </span>
  <.alert_title>Success</.alert_title>
  <.alert_description>Your changes have been saved successfully.</.alert_description>
</.alert>

Summary

Functions

Renders an alert container.

Renders an alert description.

Renders an alert title.

Functions

Renders an alert container.

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>

Attributes

  • variant (:string) - Defaults to "default".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

alert_description(assigns)

View Source

Renders an alert description.

The description provides more detailed information about the alert message.

Options

  • :class - Additional CSS classes to apply to the description.

Examples

<.alert_description>Your account has been updated successfully.</.alert_description>
<.alert_description class="text-gray-600">
  Please review the changes before continuing.
</.alert_description>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

Renders an alert title.

The title component is used to provide a concise heading for the alert message.

Options

  • :class - Additional CSS classes to apply to the title.

Examples

<.alert_title>Success</.alert_title>
<.alert_title class="text-primary">Important Notice</.alert_title>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)