Skip to content

Toast

Stacking toast and message-toast notifications with auto-dismiss and hover pause. Trigger client-side via Alpine.js $dispatch('notify', ...) or server-side via HTMX out-of-band swaps. Place @toast.ToastContainer once in your layout.

Default Rendered example
Usage Example
// 1. Place the container once in your layout
@toast.ToastContainer(toast.ContainerConfig{})

// 2. Trigger toasts from Alpine.js
<button x-on:click="$dispatch('notify', {
    kind: 'toast',
    tone: 'success',
    title: 'Saved!',
    message: 'Your changes have been saved.',
})">Save</button>

// Message toasts carry a sender and message:
<button x-on:click="$dispatch('notify', {
    kind: 'message-toast',
    sender: { name: 'Jane', avatar: '/avatar.jpg' },
    message: 'Hey, check this out!',
	})">Send</button>

Server-side Triggers (HTMX OOB)

Render a toast from a Go handler and swap it in out-of-band — the trigger button posts with hx-swap="none".

Server-side Triggers (HTMX OOB) Rendered example
Server-side Triggers (HTMX OOB)
// Trigger button
<button hx-post="/api/components/toast" hx-swap="none"
    hx-vals='{"tone":"success","title":"Server Says Hello!","message":"..."}'>
    Server Success Toast
</button>

// Handler
func handler(w http.ResponseWriter, r *http.Request) {
    toast.OOBToast(toast.Config{
        Tone: toast.ToneSuccess, Title: "Created!", Message: "The item was created.",
    }).Render(r.Context(), w)
}

Static Examples (Server-Rendered)

Semantic toasts use @toast.Toast; sender-oriented messages use @toast.MessageToast.

Static Examples (Server-Rendered) Rendered example
Static Examples (Server-Rendered)
@toast.Toast(toast.Config{Tone: toast.ToneSuccess, Title: "Success!", Message: "Your changes have been saved."})
@toast.MessageToast(toast.MessageConfig{
    Message: "Hey, can you review the PR I just submitted?",
    Sender:  toast.Sender{Name: "Jack Ellis", Avatar: "/avatar.webp"},
})

Action Toast

Server-rendered toasts can include one inline action button. Set ActionLabel and ActionHTMX for undo, retry, or view-detail flows.

Action Toast Rendered example
Action Toast
@toast.Toast(toast.Config{
    Tone:            toast.ToneSuccess,
    Title:           "Project archived",
    Message:         "The project moved to archived items.",
    DisplayDuration: -1,
    ActionLabel:     "Undo archive",
    ActionHTMX: &toast.HTMXConfig{
        Post: "/api/components/toast",
        Swap: "none",
    },
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/toast
Open v0.2.7 API