All dialog functions return Promises, so you can use async/await for clean, synchronous-looking code:

// Confirm dialog
const confirmed = await PureAdmin.confirm({
  title: 'Delete Item?',
  message: 'This action cannot be undone.',
  variant: 'danger'
});

if (confirmed) {
  // User clicked OK
}

// Alert dialog
await PureAdmin.alert({
  title: 'Success!',
  message: 'Your changes have been saved.',
  variant: 'success'
});

// Prompt dialog
const name = await PureAdmin.prompt({
  title: 'Enter Name',
  message: 'Please enter your name:',
  defaultValue: 'John Doe'
});

if (name !== null) {
  console.log('User entered:', name);
}

Two-button dialogs that return true (confirmed) or false (cancelled).

Dialogs can be positioned in the center (default) or at the top of the viewport.

// Center position (default)
await PureAdmin.alert({
  title: 'Centered',
  message: 'This dialog is centered.',
  position: 'center'  // default
});

// Top position
await PureAdmin.prompt({
  title: 'Top Position',
  message: 'This dialog appears near the top.',
  position: 'top'
});

Single-button dialogs for notifications. Just wait for the user to acknowledge.

Text input dialogs that return the entered value (or null if cancelled).

Chain multiple dialogs together using async/await:

async function sequentialDialogs() {
  const name = await PureAdmin.prompt({
    title: 'Step 1 of 3',
    message: 'Enter your name:'
  });

  if (name === null) return;

  const email = await PureAdmin.prompt({
    title: 'Step 2 of 3',
    message: 'Enter your email:'
  });

  if (email === null) return;

  const confirmed = await PureAdmin.confirm({
    title: 'Step 3 of 3',
    message: `Confirm: ${name} <${email}>`,
    variant: 'success'
  });

  if (confirmed) {
    await PureAdmin.alert({
      title: 'Complete!',
      message: 'Registration successful.',
      variant: 'success'
    });
  }
}

Use onclick with liveSocket to push results back to the server. The server records the outcome and pushes a toast straight back — try the buttons:

Client — push the result to the server:

// Push a dialog result to LiveView from plain JS (outside a hook).
async function confirmAndPush(action) {
  const confirmed = await PureAdmin.confirm({
    title: 'Delete Item?',
    message: 'This action cannot be undone.',
    variant: 'danger'
  });

  if (confirmed) {
    // Use the public execJS API with the same encoded command phx-click uses.
    // `value` becomes the event params on the server.
    const el = document.querySelector('[data-phx-main]');
    window.liveSocket.execJS(el, JSON.stringify(
      [["push", { event: "dialog_result", value: { action, result: "confirmed" } }]]
    ));
  }
}

Servidor — reply with a toast, no reload:

# The LiveView receives the pushed event and sends a toast back — no reload,
# the PureAdminToast hook just renders it wherever the user is.
def handle_event("dialog_result", %{"action" => action, "result" => result}, socket) do
  {:noreply,
   socket
   |> assign(last_result: "#{action}: #{result}")
   |> push_toast("success", "Server received your action",
        "You just performed #{action} (#{result}) in the dialog.")}
end

Standard dialogs can't express an arbitrary form, so PureAdmin.Dialog.open/3 just stashes a keyed spec and you render your own <.modal> with a real LiveView form — full phx-change validation and phx-submit. close/1 dismisses it. The server opens it the same way (a phx-click handler), but owns the content.

# Custom/form dialog (requirement B): open/3 stashes a keyed spec — YOU render
# your own <.modal> with a real LiveView form. close/1 dismisses it.
def handle_event("edit_profile", _p, socket) do
  form = to_form(%{"name" => "Ada Lovelace", "email" => "ada@example.com"}, as: :profile)
  {:noreply, socket |> assign(profile_form: form) |> PureAdmin.Dialog.open(:edit_profile)}
end

def handle_event("validate_profile", %{"profile" => params}, socket) do
  {:noreply, assign(socket, profile_form: to_form(params, as: :profile, errors: errors(params)))}
end

def handle_event("save_profile", %{"profile" => params}, socket) do
  case errors(params) do
    []   -> {:noreply, socket |> PureAdmin.Dialog.close() |> assign(profile_result: "Saved.")}
    errs -> {:noreply, assign(socket, profile_form: to_form(params, as: :profile, errors: errs))}
  end
end

# render — your OWN modal + form, keyed on @pa_dialog:
<.modal :if={@pa_dialog && @pa_dialog.key == :edit_profile} id="edit-profile" show
        title_text="Edit profile" on_cancel={JS.push("pa-dialog:close")}>
  <.form for={@profile_form} class="pa-form"
         phx-change="validate_profile" phx-submit="save_profile">
    <div class="pa-form-group"><label>Name</label><.input field={@profile_form[:name]} /></div>
    <div class="pa-form-group"><label>Email</label><.input field={@profile_form[:email]} type="email" /></div>
    <div class="pa-modal__footer">
      <button type="button" class="pa-btn pa-btn--secondary" phx-click="pa-dialog:close">Cancel</button>
      <button type="submit" class="pa-btn pa-btn--primary">Save</button>
    </div>
  </.form>
</.modal>

PureAdmin.confirm(options)

Returns Promise<boolean>

PureAdmin.alert(options)

Returns Promise<void>

PureAdmin.prompt(options)

Returns Promise<string | null>