LanternUI.Components.AlertDialog (LanternUI v0.8.2)

Copy Markdown View Source

Semantic confirmation dialog composed on the shared modal runtime.

Alert dialogs require a title, description, cancel control, and action control. The cancel slot is rendered before the action slot, so it receives initial focus when the dialog opens. Escape still closes and restores focus; clicking outside never dismisses the dialog.

<.button phx-click={LanternUI.open_dialog("delete-project")}>Delete…</.button>

<.alert_dialog id="delete-project">
  <:title>Delete this project?</:title>
  <:description>This action cannot be undone.</:description>
  <:cancel>
    <.button phx-click={LanternUI.close_dialog("delete-project")}>Cancel</.button>
  </:cancel>
  <:action>
    <.button color="danger" phx-click="delete-project">Delete project</.button>
  </:action>
</.alert_dialog>

Summary

Functions

alert_dialog(assigns)

Attributes

  • id (:string) (required) - Stable DOM id used by open_dialog/close_dialog.
  • open (:boolean) - Render already open. Defaults to false.
  • close_on_esc (:boolean) - Close when Escape is pressed. Defaults to true.
  • class (:any) - Extra classes on the dialog panel. Defaults to nil.
  • container_class (:any) - Extra classes on the overlay root. Defaults to nil.
  • backdrop_class (:any) - Extra classes on the dimmed backdrop. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • title (required) - Concise statement of the consequence.
  • description (required) - Explanation of the irreversible action.
  • cancel (required) - Safe cancellation control; receives initial focus.
  • action (required) - Confirmation control for the destructive action.