templUI Pro coming soon  

50% OFF Join Waitlist

Toast

Flexible toast component for notifications and feedback.

Source
TailwindCSS
Vanilla JS

Installation

  1. Install the component

    templui add toast
  2. Add the JavaScript to your layout

    @toast.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

// 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{
			Text: err.Error(),
			Variant: components.ToastVariantError,
		}).Render(r.Context(), w)
	}
}

Examples

Playground

API Reference

Required parameter
Hover for description

Toast

Notification component that appears temporarily to provide feedback.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-
Title
string
-
Description
string
-
Variant
Variant
default
Position
Position
bottom-right
Duration
int
3000
Dismissible
bool
false
ShowIndicator
bool
false
Icon
bool
false