Toast Notification

View Original

Stacking toast notifications with auto-dismiss, hover pause, and multiple variants. Supports both client-side Alpine.js events and server-side HTMX OOB swaps.

Goshtoso Component

Go + Templ

Client-side Triggers (Alpine.js)

Click to dispatch toast notifications via Alpine.js events.

Server-side Triggers (HTMX OOB)

Click to fetch a toast from the server via HTMX out-of-band swap.

Static Examples (Server-Rendered)

These toasts are rendered server-side, showing each variant statically.

Update Available

A new version of the app is ready.

Success!

Your changes have been saved.

Action Needed

Your storage is getting low.

Oops!

Something went wrong.

Jack Ellis

Hey, can you review the PR I just submitted?

Usage Example

// 1. Place the container once in your layout
@toast.Container(toast.ContainerConfig{})

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

// 3. Server-side OOB toast (in your Go handler)
func handler(w http.ResponseWriter, r *http.Request) {
    // ... your logic ...
    toast.OOBToast(toast.Config{
        Variant: toast.Success,
        Title:   "Created!",
        Message: "The item was created successfully.",
    }).Render(r.Context(), w)
}

// Available variants: Info, Success, Warning, Danger, Message
// Message variant includes sender avatar and reply button:
<button x-on:click="$dispatch('notify', {
    variant: 'message',
    sender: { name: 'Jane', avatar: '/avatar.jpg' },
    message: 'Hey, check this out!',
})">Send</button>

Steps Tooltip