Modal / Dialog component for Phoenix LiveView.

Uses a LiveView-native approach: visibility is controlled by a LiveView assign, the JS hook handles focus trapping, scroll locking, and Escape-to-close.

Setup

Requires the Modal JS hook from AvenUIHooks (already wired if you ran mix aven_ui.add).

Examples

<%# In your LiveView template %>
<.button phx-click="open_modal">Open</.button>

<.modal :if={@show_modal} id="confirm-modal" on_close="close_modal">
  <:title>Delete project?</:title>
  <:description>This action cannot be undone.</:description>

  <p>All data for <strong><%= @project.name %></strong> will be permanently deleted.</p>

  <:footer>
    <.button variant="ghost" phx-click="close_modal">Cancel</.button>
    <.button variant="danger" phx-click="delete_project" phx-value-id={@project.id}>
      Delete
    </.button>
  </:footer>
</.modal>

In your LiveView:

def handle_event("open_modal",  _, socket), do: {:noreply, assign(socket, show_modal: true)}
def handle_event("close_modal", _, socket), do: {:noreply, assign(socket, show_modal: false)}

Sizes

• sm — 448px (confirmations)
• md — 560px (forms, default)
• lg — 720px (complex content)
• xl — 960px (full panels)
• full— 100vw (slideout style)