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>Subscribe to Newsletter</.button>
</.alert_dialog_trigger>
<.alert_dialog_content>
  <.alert_dialog_header>
    <.alert_dialog_title>Subscribe to Newsletter</.alert_dialog_title>
    <.alert_dialog_description>
      Enter your email below to receive our weekly newsletter with the latest updates.
    </.alert_dialog_description>
  </.alert_dialog_header>
  <div class="grid gap-4 py-4">
    <div class="grid grid-cols-4 items-center gap-4">
      <label for="email" class="text-right text-sm font-medium">
        Email
      </label>
      <input
        type="email"
        id="email"
        class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
        placeholder="you@example.com"
      />
    </div>
  </div>
  <.alert_dialog_footer>
    <.alert_dialog_cancel>Cancel</.alert_dialog_cancel>
    <.alert_dialog_action>Subscribe</.alert_dialog_action>
  </.alert_dialog_footer>
</.alert_dialog_content>