Toast

Non-blocking notifications pushed via HTMX Out-of-Band swaps. Auto-dismiss after 4 seconds. Alpine.js handles the animation.

handler.go

// In any handler response, include a toast via OOB swap:
func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
    // ... do work ...

    // Return the main response + a toast via OOB
    w.Header().Set("Content-Type", "text/html")

    // Render your main fragment
    components.ItemList(items).Render(r.Context(), w)

    // Append toast (hx-swap-oob targets #toast-region)
    toast.Toast(toast.Props{
        Variant: toast.VariantSuccess,
        Title:   "Item created",
        Message: "Your new item is ready.",
    }).Render(r.Context(), w)
}

layouts/base.templ

<!-- Add once to your base layout -->
<div id="toast-region" aria-live="polite"
     class="fixed bottom-0 right-0 z-[100] p-4 pointer-events-none flex flex-col gap-2 max-w-sm w-full">
</div>