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

Toast & confirm

Server-signalled toasts and a confirm dialog. Successful actions return an HX-Trigger response header; a small client listener renders a PatternFly toast alert and auto-dismisses it. Destructive actions intercept htmx:confirm and open the modal instead of the browser's confirm().

Examples

Toasts from the server

Each button posts to Quarkus; the server replies with only an HX-Trigger header. The danger button asks for confirmation in a PF modal first.

Documentation

Usage

The server decides what deserves a toast. Actions respond hx-swap="none" with an HX-Trigger header carrying the toast payload; /web/js/htmx/toast.js listens for the event and renders a stacking PF toast alert that auto-dismisses. No toast state on the page, no polling.

Confirm without window.confirm. Buttons marked data-pha-confirm have their htmx:confirm event intercepted: the PF modal opens with the hx-confirm text, and only the modal's Confirm button lets the request proceed.

Edit toast.js on GitHub