Toast Notification

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

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>

// Message variant carries a sender avatar + reply button:
<button x-on:click="$dispatch('notify', {
    variant: 'message',
    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)

// Trigger button
<button hx-post="/api/components/toast" hx-swap="none"
    hx-vals='{"variant":"success","title":"Server Says Hello!","message":"..."}'>
    Server Success Toast
</button>

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

Static Examples (Server-Rendered)

Each variant rendered statically with @toast.Toast — Info, Success, Warning, Danger, and Message (with sender).

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?

Static Examples (Server-Rendered)

@toast.Toast(toast.Config{Variant: toast.Success, Title: "Success!", Message: "Your changes have been saved."})
@toast.Toast(toast.Config{
    Variant: toast.Message,
    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.

Project archived

The project moved to archived items.

Action Toast

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

API Reference

Prop	Type	Default	Description
`Variant`	`Variant`	`Info`	Color/style: "info", "success", "warning", "danger", "message".
`Title`	`string`	`""`	Toast heading (omitted by the message variant).
`Message`	`string`	`""`	Toast body text.
`Sender`	`*Sender`	`nil`	Message-variant sender (Name + Avatar); adds avatar and reply button.
`DisplayDuration`	`int`	`0`	Auto-dismiss delay in ms (0 uses the container default; negative keeps a server-rendered toast visible until dismissed).
`ActionLabel`	`string`	`""`	Optional inline action button label for server-rendered toasts.
`ActionHTMX`	`*HTMXConfig`	`nil`	HTMX request for the action button (Get/Post, Target, Swap).

Alert Modal