View Source SaladUI.Alert (SaladUI v1.0.0-beta.1)
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.
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 tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
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 tonil
.- 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 tonil
.- Global attributes are accepted. Supports all globals plus:
["disabled", "form", "name", "value"]
.
Slots
inner_block
(required)