Toast

Flexible toast component for notifications and feedback.

TailwindCSS
Alpine.js

Usage

1. Add the script to your page/layout:

// Option A: All components (recommended)
@utils.ComponentScripts()

// Option B: Just Toast
@components.ToastScript()

2. Use the component:

@components.Toast(components.ToastProps{})
// Template
templ UserForm() {
	<form hx-post="/save" hx-target="#toast">
	   <input name="email" />
	</form>
	<div id="toast"></div>
}

// Handler
func Save(w http.ResponseWriter, r *http.Request) {
	if err != nil {
		components.Toast(components.ToastProps{
			Message: err.Error(),
			Type: "error",
		}).Render(r.Context(), w)
	}
}

Examples

Playground