Moon Liveview Library

Dialog

Default Open in playground
Content
 
<.button phx-click={show_dialog("dialog-single-default")} data-testid="dialog-default-open-button">
    Open Dialog
  </.button>
  <.dialog id="dialog-single-default">
    <div class="w-full flex items-center justify-center h-space-160 bg-brand-subtle text-brand">Content</div>
  </.dialog>
With header Open in playground
Dialog
Content
 
<.button phx-click={show_dialog("dialog-single-with-header")} data-testid="dialog-default-open-button">
    Open Dialog
  </.button>
  <.dialog id="dialog-single-with-header" has_close_button>
    <:header>
      Dialog
    </:header>
    <div class="flex items-center justify-center h-space-160 bg-brand-subtle text-brand">Content</div>
  </.dialog>