Implementation of Alert Dialog component for SaladUI framework.
Alert Dialogs are modal dialogs that require a user action before they can be dismissed, used to confirm user decisions or provide critical information.
Examples:
<.alert_dialog id="delete-confirmation">
<.alert_dialog_trigger>
<.button variant="destructive">Delete Account</.button>
</.alert_dialog_trigger>
<.alert_dialog_content>
<.alert_dialog_header>
<.alert_dialog_title>Are you absolutely sure?</.alert_dialog_title>
<.alert_dialog_description>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</.alert_dialog_description>
</.alert_dialog_header>
<.alert_dialog_footer>
<.alert_dialog_cancel>Cancel</.alert_dialog_cancel>
<.alert_dialog_action>Continue</.alert_dialog_action>
</.alert_dialog_footer>
</.alert_dialog_content>
</.alert_dialog>Component events
:on-open- Maps theopenevent. Fired when dialog enters open state.:on-close- Maps thecloseevent. Fired when dialog enters closed state.
Server commands
"open"- Opens the dialog."close"- Closes the dialog.
Summary
Functions
The main alert dialog component.
The primary action button for the alert dialog.
The cancel button for the alert dialog.
The content container of the alert dialog.
The description of the alert dialog.
The footer section of the alert dialog containing action buttons.
The header section of the alert dialog.
The title of the alert dialog.
The trigger element that opens the alert dialog.
Functions
The main alert dialog component.
Options
:id- Required unique identifier for the alert dialog.:open- Whether the alert dialog is initially open. Defaults tofalse.:on-open- Handler foropenevent. Accepts a server event name or%Phoenix.LiveView.JS{}.:on-close- Handler forcloseevent. Accepts a server event name or%Phoenix.LiveView.JS{}.:class- Additional CSS classes.
Component events
:on-open- Fired when the dialog opens.:on-close- Fired when the dialog closes.
Server commands
"open"- Opens the dialog."close"- Closes the dialog.
Attributes
id(:string) (required) - Unique identifier for the alert dialog.open(:boolean) - Whether the alert dialog is initially open. Defaults tofalse.on-open(:any) - Handler for alert dialog open event. Defaults tonil.on-close(:any) - Handler for alert dialog close event. Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The primary action button for the alert dialog.
Attributes
class(:string) - Defaults tonil.variant(:string) - Defaults to"default". Must be one of"default","secondary","destructive","outline","ghost", or"link".size(:string) - Defaults to"default". Must be one of"default","sm","lg", or"icon".- Global attributes are accepted.
Slots
inner_block(required)
The cancel button for the alert dialog.
Attributes
class(:string) - Defaults tonil.variant(:string) - Defaults to"outline". Must be one of"default","secondary","destructive","outline","ghost", or"link".size(:string) - Defaults to"default". Must be one of"default","sm","lg", or"icon".- Global attributes are accepted.
Slots
inner_block(required)
The content container of the alert dialog.
Attributes
class(:string) - Defaults tonil.aria-label(:string) - Defaults to"Alert dialog".- Global attributes are accepted.
Slots
inner_block(required)
The description of the alert dialog.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The header section of the alert dialog.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The title of the alert dialog.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The trigger element that opens the alert dialog.
Attributes
class(:string) - Defaults tonil.as(:any) - Defaults to"div".- Global attributes are accepted.
Slots
inner_block(required)