Live demo — this example is server-driven; run the showcase locally for the interactive version.

Modal

Use Modal straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

{#include components/feedback/modal /}

Modal — PatternFly v6 (modal-box). Root of the modal family; compose
   modal-close / modal-header / modal-body / modal-footer includes in the main block. 
 Required: id — modal-box id; the backdrop gets {id}-backdrop and the header derives
              {id}-title for aria-labelledby. 
 Optional params:
     size       — sm | md | lg (pf-m-*).
     variant    — danger | warning | success | info | custom (pf-m-* + colored title icon
                  in modal-header; "custom" renders PF's bell icon).
     statusTitle — boolean; moves the variant's status class from the modal box to the
                  title element (core's HasStatusTitle).
     alignTop   — pf-m-align-top.
     width      — custom width (e.g. "50%") via PF's --pf-v6-c-modal-box--Width var.
     ariaLabel  — label the dialog directly (use for headerless modals).
     eventOpen  — self-contained mode: the backdrop owns x-data open state, opens on the
                  open-modal window event (detail = id), closes on Escape, and traps focus.
                  Without it the modal expects an outer x-data providing `open`.
     escapeExpr — override the Escape-key expression (e.g. close an inner dropdown first).
     attrs      — raw attribute passthrough on the modal-box. 
 Model mode: pass modal=<org.sitenetsoft.quarkus.pha.model.Modal> — renders the FULL live pattern
   (launcher + backdrop + box). Live inner-state compositions keep the slot shell. 
 The backdrop teleports to document.body: the PF page main-container creates a stacking context
   (z-index + glass backdrop-filter) that would trap the fixed backdrop under the masthead.
   PF React portals modals to document.body for the same reason.

{#include components/feedback/modal-body /}

Modal body — main-block content. 
 Optional: scrollable — makes the body keyboard-scrollable (tabindex=0).

{#include components/feedback/modal-close /}

Modal close button — closes via the family's `open` Alpine state. 
 Optional: ariaLabel (default "Close").

{#include components/feedback/modal-footer /}

Modal footer — main-block content (action buttons).

{#include components/feedback/modal-header /}

Modal header — title content is the include's main block (rich markup welcome).
   Inherits modalId from the modal root and derives the {modalId}-title id that the
   root's aria-labelledby points at. 
 Optional params:
     headingLevel    — h1…h6 (default h1).
     variant         — danger | warning | success | info | custom; renders the matching
                       title icon and pf-m-icon on the title.
                       (Inherited from the modal root automatically when set there.)
     alert           — boolean; prefixes the title with a screen-reader-only
                       "&lt;Variant&gt; alert:" span (core's IsAlert).
     statusTitle     — boolean; adds the variant's status class to the title element
                       (inherited from the modal root when set there).
     iconName        — custom title icon ("set:slug"), overrides the variant icon.
     descriptionText — __description line under the title (inside __header-main, per core).
     hasModalHelp    — pf-m-help on the header and the modalHelp slot rendered after
                       __header-main (help button / popover).