Dialog

Modal dialog using a screen-share friendly overlay with accessible dialog semantics.

Basic Dialog

    <.button phx-click={SutraUI.Dialog.show_dialog("my-dialog")}>
  Open Dialog
</.button>

<.dialog id="my-dialog">
  <:title>Are you sure?</:title>
  <:description>This action cannot be undone.</:description>
  <p>Dialog content goes here.</p>
  <:footer>
    <.button variant="outline" phx-click={SutraUI.Dialog.hide_dialog("my-dialog")}>
      Cancel
    </.button>
    <.button phx-click={SutraUI.Dialog.hide_dialog("my-dialog")}>
      Confirm
    </.button>
  </:footer>
</.dialog>
  

With Form

Dialogs work great for form inputs.

Form Dialog

    <.button phx-click={SutraUI.Dialog.show_dialog("form-dialog")}>
  Edit Profile
</.button>

<.dialog id="form-dialog">
  <:title>Edit Profile</:title>
  <:description>Make changes to your profile.</:description>
  <div class="space-y-4 py-4">
    <.input label="Name" placeholder="Enter your name" />
    <.input label="Email" type="email" />
  </div>
  <:footer>
    <.button variant="outline" phx-click={SutraUI.Dialog.hide_dialog("form-dialog")}>
      Cancel
    </.button>
    <.button>Save Changes</.button>
  </:footer>
</.dialog>
  

Notes

Uses a div-based overlay instead of the browser top layer, so dialogs remain visible in screen-sharing tools.
Focus is automatically trapped within the dialog.
Press Escape or click the backdrop to close.
ARIA attributes are automatically set based on title and description slots.