Salad UI

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 alert dialog open event.
  • :on-close - Handler for alert dialog close event.
  • :class - Additional CSS classes.
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>