@spec hide_modal(String.t()) :: Phoenix.LiveView.JS.t()

Returns a JS command to hide a modal by removing the pa-modal--show class.

Renders a modal dialog.

Examples

<.modal id="confirm-modal" title_text="Confirm Action">
  Are you sure you want to proceed?
  <:footer>
    <.button variant="secondary" phx-click={hide_modal("confirm-modal")}>Cancel</.button>
    <.button variant="primary" phx-click="confirm">Confirm</.button>
  </:footer>
</.modal>

<.modal id="danger-modal" variant="danger" header_variant="danger" title_text="Delete Item">
  This action cannot be undone.
  <:footer>
    <.button variant="danger" phx-click="delete">Delete</.button>
  </:footer>
</.modal>

<!-- Show modal from a button -->
<.button phx-click={show_modal("confirm-modal")}>Open Modal</.button>

Attributes

• id (:string) (required)
• variant (:string) - Full modal theming. Defaults to nil. Must be one of nil, "primary", "success", "warning", "danger", or "info".
• header_variant (:string) - Header-only theming. Defaults to nil. Must be one of nil, "primary", "success", "warning", "danger", or "info".
• size (:string) - Defaults to nil.Must be one of nil, "sm", "md", "lg", "xl", "xxl", or "fw".
• is_static (:boolean) - Prevent closing via ESC/backdrop. Defaults to false.
• is_top (:boolean) - Position near top of viewport. Defaults to false.
• is_scrollable (:boolean) - Scrollable body. Defaults to false.
• show (:boolean) - Initial visibility. Defaults to false.
• title_text (:string) - Modal title text (shorthand for :header slot). Defaults to nil.
• should_show_close (:boolean) - Show close button in header. Defaults to true.
• on_cancel (Phoenix.LiveView.JS) - JS command to run when modal is cancelled. Defaults to %Phoenix.LiveView.JS{ops: []}.
• class (:string) - Defaults to nil.
• body_class (:string) - Additional CSS classes for body. Defaults to nil.
• footer_class (:string) - Additional CSS classes for footer. Defaults to nil.
• Global attributes are accepted.

Slots

• header - Modal header content (overrides title_text).
• footer - Modal footer content.
• inner_block (required)

@spec show_modal(String.t()) :: Phoenix.LiveView.JS.t()

Returns a JS command to show a modal by adding the pa-modal--show class.