Back

Toast

Live Triggers

Toasts are shown by dispatching a ui:toast custom event on document. They auto-expire after 4 seconds.

With Action

Pass an action object with label and callback to show a clickable button inside the toast.

Positions

Pass Position to ToastContainer. Include only one container per page.

  • "top-right"
  • "top-left"
  • "bottom-right" (default)
  • "bottom-left"
  • "top-center"

Usage

Add the container once per page (already included in layouts.Base). Fire toasts from Go via HX-Trigger or from JS with a custom event.

// In your templ layout (once per page):
@overlays.ToastContainer(overlays.ToastProps{Position: "bottom-right"})

// From HTMX handler (Go):
c.Response().Header().Set("HX-Trigger",
    `{"ui:toast":{"message":"Saved!","type":"success"}}`)

// From JavaScript:
document.dispatchEvent(new CustomEvent('ui:toast', {
    detail: { message: 'Done!', type: 'success' },
}));

// With an action button:
document.dispatchEvent(new CustomEvent('ui:toast', {
    detail: {
        message: 'File deleted.',
        type: 'danger',
        action: { label: 'Undo', callback: () => restoreFile() },
    },
}));