Overlays

Modal & alert dialog

Focus-trapped dialogs for forms and confirmations.

Modal

General-purpose dialog content on the shared overlay runtime: focus trap, Esc/outside dismissal, optional close button, and token-driven fade. Use it for forms, details, and reversible workflows.

Edit workspace details

A normal modal can contain arbitrary form content and dismisses on Esc, close button, or outside click.

<.button phx-click={LanternUI.open_dialog("workspace-modal")}>Edit workspace</.button>

<.modal id="workspace-modal">
  <h2>Edit workspace</h2>
  <.input name="workspace_name" label="Workspace name" value="Acme Operations" />
  <.button phx-click={LanternUI.close_dialog("workspace-modal")}>Cancel</.button>
  <.button variant="solid" phx-click={LanternUI.close_dialog("workspace-modal")}>Save</.button>
</.modal>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`animation`	`string`	`nil`	accepted for Fluxon compat; fade is token-driven
`animation_enter`	`string`	`nil`	accepted for Fluxon compat
`animation_leave`	`string`	`nil`	accepted for Fluxon compat
`aria_describedby`	`string`	`nil`	Id of the dialog description element.
`aria_label`	`string`	`nil`	Accessible name for the dialog panel.
`aria_labelledby`	`string`	`nil`	Id of the dialog title element.
`backdrop_class`	`any`	`nil`	Extra classes on the dimmed backdrop.
`class`	`any`	`nil`	Extra classes on the dialog panel.
`close_on_esc`	`boolean`	`true`	Close when Escape is pressed.
`close_on_outside_click`	`boolean`	`true`	Close when the backdrop is clicked.
`container_class`	`any`	`nil`	Extra classes on the overlay root.
`controlled`	`boolean`	`false`	Strict server-driven open state: `open` is truth, patches flow into the machine.
`hide_close_button`	`boolean`	`false`	Hide the built-in close control.
`id`*	`string`	`—`	Stable DOM id used by open_dialog/close_dialog.
`initial_focus`	`string`	`nil`	Selector for the element or region that receives focus when opened.
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:dialog:open/close` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`on_close`	`{:struct, Phoenix.LiveView.JS}`	`nil`	JS command run when the modal closes.
`on_open`	`{:struct, Phoenix.LiveView.JS}`	`nil`	JS command run when the modal opens.
`open`	`boolean`	`false`	render already open (server-driven modals)
`placement`	`center \| top`	`"center"`	Vertical panel placement within the viewport.
`prevent_closing`	`boolean`	`false`	Block Escape and outside-click close.
`role`	`string`	`"dialog"`	ARIA role for the dialog panel.
Slots
`:inner_block`*	Dialog body content.

Alert dialog

A deliberately constrained confirmation surface for irreversible or high-impact choices. Unlike a general modal, it requires consequence copy plus cancel/action controls, focuses Cancel first, hides the generic close button, and ignores outside clicks.

Revoke a production credential

The consequence is concrete and the destructive action is visually singular. This demo never changes a real credential.

<.button phx-click={LanternUI.open_dialog("revoke-key")}>Revoke key…</.button>

<.alert_dialog id="revoke-key">
  <:title>Revoke the production API key?</:title>
  <:description>Requests using pk_live_7K… will fail immediately.</:description>
  <:cancel>
    <.button phx-click={LanternUI.close_dialog("revoke-key")}>Keep key</.button>
  </:cancel>
  <:action>
    <.button color="danger" variant="solid" phx-click="revoke_key">Revoke key</.button>
  </:action>
</.alert_dialog>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`backdrop_class`	`any`	`nil`	Extra classes on the dimmed backdrop.
`class`	`any`	`nil`	Extra classes on the dialog panel.
`close_on_esc`	`boolean`	`true`	Close when Escape is pressed.
`container_class`	`any`	`nil`	Extra classes on the overlay root.
`id`*	`string`	`—`	Stable DOM id used by open_dialog/close_dialog.
`open`	`boolean`	`false`	Render already open.
Slots
`:action`*	Confirmation control for the destructive action.
`:cancel`*	Safe cancellation control; receives initial focus.
`:description`*	Explanation of the irreversible action.
`:title`*	Concise statement of the consequence.