Dialog

Modal dialog using the native HTML dialog element with full accessibility support.

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 the native <dialog> element with showModal() and close().
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.