Salad UI
- 1.3.0

Alert Dialog

The main alert dialog component.

Read more Read less

Options

  • :id - Required unique identifier for the alert dialog.
  • :open - Whether the alert dialog is initially open. Defaults to false.
  • :on-open - Handler for open event. Accepts a server event name or %Phoenix.LiveView.JS{}.
  • :on-close - Handler for close event. 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.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the alert dialog
open :boolean

Whether the alert dialog is initially open
false
on-open :any

Handler for alert dialog open event
on-close :any

Handler for alert dialog close event
class :string
rest :global
Required inner_block * :slot 
<.alert_dialog_trigger>
  <.button variant="outline">Show Alert Dialog</.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>