This component is meant for situations where critical information must be conveyed, and an explicit response is required from the user. It is typically used for confirmation dialogs, warning messages, error notifications, and other scenarios where an immediate decision is necessary.

For non-critical dialogs, such as those containing forms or additional information, use Doggo.Components.build_modal/1 instead.

Usage

<.alert_dialog id="end-session-modal">
  <:title>End Training Session Early?</:title>
  <p>
    Are you sure you want to end the current training session with Bella?
    She's making great progress today!
  </p>
  <:footer>
    <.button phx-click="end-session">
      Yes, end session
    </.button>
    <.button phx-click={JS.exec("data-cancel", to: "#end-session-modal")}>
      No, continue training
    </.button>
  </:footer>
</.alert_dialog>

To open the dialog, use the show_modal/1 function.

<.button
  phx-click={.show_modal("end-session-modal")}
  aria-haspopup="dialog"
>
  show
</.button>

CSS

To hide the modal when the open attribute is not set, use the following CSS styles:

dialog.alert-dialog:not([open]),
dialog.alert-dialog[open="false"] {
  display: none;
}

Semantics

While the showModal() JavaScript function is typically recommended for managing modal dialog semantics, this component utilizes the open attribute to control visibility. This approach is chosen to eliminate the need for library consumers to add additional JavaScript code. To ensure proper modal semantics, the aria-modal attribute is added to the dialog element.