Toast

Flexible toast component for notifications and feedback.

Source Tailwind CSS JavaScript

package showcase

import "github.com/templui/templui/components/button"

templ ToastDefault() {
	<div>
		<form
			class="flex flex-col gap-2"
			hx-post="/docs/toast/demo"
			hx-trigger="submit"
			hx-target="#toast-container"
			hx-vals='{
				"title": "You have a new notification",
				"description": "Test Notification",
				"dismissible": "on"
			}'
		>
			@button.Button(button.Props{
				Type:    button.TypeSubmit,
				Variant: button.VariantOutline,
			}) {
				Show Toast
			}
		</form>
		<div id="toast-container"></div>
	</div>
}

Installation

templui add toast

Load the script once in your layout:

<head>
  @toast.Script()
</head>

// 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 {
		toast.Toast(toast.Props{
			Description: err.Error(),
			Variant:     toast.VariantError,
		}).Render(r.Context(), w)
	}
}

// Template
templ UserForm(error string) {
    if error != "" {
        @toast.Toast(toast.Props{
            Description: error,
            Variant:     toast.VariantError,
        })
    }
    <form method="POST">
        <input name="email"/>
    </form>
}
// Handler
func Save(w http.ResponseWriter, r *http.Request) {
    if err != nil {
        UserForm(err.Error()).Render(r.Context(), w)
    }
}

Examples

Playground

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/components/input"
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/selectbox"
	switchcomp "github.com/templui/templui/components/switch"
)

templ ToastPlayground() {
	<div class="w-full max-w-4xl mx-auto p-8">
		<section class="mb-12">
			@card.Card() {
				@card.Content() {
					<form
						class="flex flex-col gap-2"
						hx-post="/docs/toast/demo"
						hx-trigger="submit"
						hx-target="#toast-advanced-container"
					>
						// Message
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "title",
							}) {
								Message
							}
							@input.Input(input.Props{
								Value: "You have a new notification",
								ID:    "title",
								Name:  "title",
							})
						}
						// Description
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "description",
							}) {
								Description
							}
							@input.Input(input.Props{
								Value: "Test Notification",
								ID:    "description",
								Name:  "description",
							})
						}
						// Type
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "type",
							}) {
								Type
							}
							@selectbox.SelectBox() {
								@selectbox.Trigger(selectbox.TriggerProps{
									Name: "type",
									ID:   "type",
								}) {
									@selectbox.Value(selectbox.ValueProps{
										Placeholder: "Default",
									})
								}
								@selectbox.Content() {
									@selectbox.Group() {
										@selectbox.Item(selectbox.ItemProps{
											Value:    "default",
											Selected: true,
										}) {
											Default
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "success",
										}) {
											Success
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "error",
										}) {
											Error
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "warning",
										}) {
											Warning
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "info",
										}) {
											Info
										}
									}
								}
							}
						}
						// Position
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "position",
							}) {
								Position
							}
							@selectbox.SelectBox() {
								@selectbox.Trigger(selectbox.TriggerProps{
									Name: "position",
									ID:   "position",
								}) {
									@selectbox.Value(selectbox.ValueProps{
										Placeholder: "Bottom Right",
									})
								}
								@selectbox.Content() {
									@selectbox.Group() {
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-right",
										}) {
											Top Right
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-left",
										}) {
											Top Left
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-center",
										}) {
											Top Center
										}
										@selectbox.Item(selectbox.ItemProps{
											Value:    "bottom-right",
											Selected: true,
										}) {
											Bottom Right
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "bottom-left",
										}) {
											Bottom Left
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "bottom-center",
										}) {
											Bottom Center
										}
									}
								}
							}
						}
						// Duration
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "duration",
							}) {
								Duration (ms)
							}
							@input.Input(input.Props{
								Type:  input.TypeNumber,
								Value: "3000",
								ID:    "duration",
								Name:  "duration",
							})
						}
						// Options
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "dismissible",
							}) {
								Dismissible
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									Name:    "dismissible",
									Checked: true,
									ID:      "dismissible",
								})
								@label.Label(label.Props{
									For: "dismissible",
								}) {
									Dimissible
								}
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									Name:    "icon",
									Checked: true,
								})
								@label.Label(label.Props{
									For: "icon",
								}) {
									Show Icon
								}
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									ID:      "indicator",
									Name:    "indicator",
									Checked: true,
								})
								@label.Label(label.Props{
									For: "indicator",
								}) {
									Show Indicator
								}
							}
						}
						// Submit
						@button.Button(button.Props{
							Variant: button.VariantOutline,
							Type:    button.TypeSubmit,
							Class:   "w-full",
						}) {
							Show Toast
						}
					</form>
				}
			}
		</section>
		<div id="toast-advanced-container"></div>
	</div>
}

API Reference

Required parameter

Hover for description

Toast

Notification component that appears temporarily to provide feedback.

Name	Type	Default
`ID` Unique identifier for the toast element. Auto-generated if not provided.	`string`	-
`Class` Additional CSS classes to apply to the toast.	`string`	-
`Attributes` Additional HTML attributes to apply to the toast element.	`templ.Attributes`	-
`Title` Title text displayed in the toast header.	`string`	-
`Description` Description text displayed below the title.	`string`	-
`Variant` Visual style variant. Options: 'default', 'success', 'error', 'warning', 'info'.	`Variant`	`default`
`Position` Screen position for the toast. Options: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'.	`Position`	`bottom-right`
`Duration` Duration in milliseconds before auto-dismissing the toast.	`int`	`3000`
`Dismissible` Whether to show a close button for manual dismissal.	`bool`	`false`
`ShowIndicator` Whether to show a progress indicator bar at the top.	`bool`	`false`
`Icon` Whether to show an icon based on the variant type.	`bool`	`false`

Menu

Getting Started

Components

Toast

Installation

Examples

API Reference

Toast