feedback

func Alert ¶

func Alert(props AlertProps) templ.Component

Alert renders a full-width alert banner

@feedback.Alert(feedback.AlertProps{Title: "Error", Message: "Something went wrong", Type: feedback.AlertError})

The dismiss-button markup is intentionally duplicated in errorpage.ErrorAlert: errorpage must not import feedback (kept minimal for error paths) and no shared markup package exists. JS behaviour is shared via utils.DismissScript().

package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/feedback"
)

func main() {
	props := feedback.DefaultAlertProps()
	props.Type = feedback.AlertSuccess
	props.Title = "Success"
	props.Message = "Your changes have been saved."

	var buf bytes.Buffer
	_ = feedback.Alert(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

Output:

func InlineError ¶

func InlineError(message string) templ.Component

InlineError renders a compact inline error message for forms

@feedback.InlineError("This field is required")

func InlineLoading ¶

func InlineLoading(message string) templ.Component

InlineLoading renders a compact inline loading indicator

@feedback.InlineLoading("Saving...")

func InlineSuccess ¶

func InlineSuccess(message string) templ.Component

InlineSuccess renders a compact inline success message

@feedback.InlineSuccess("Saved successfully")

func LoadingOverlay ¶

func LoadingOverlay(props LoadingOverlayProps) templ.Component

LoadingOverlay renders a full-screen loading overlay

@feedback.LoadingOverlay(feedback.LoadingOverlayProps{Message: "Loading...", ShowProgress: true, Progress: 45})

func ProgressBar ¶

func ProgressBar(props ProgressBarProps) templ.Component

ProgressBar renders a progress indicator

@feedback.ProgressBar(feedback.ProgressBarProps{Current: 45, Total: 100, Label: "Uploading"})

func Skeleton ¶

func Skeleton(variant SkeletonVariant) templ.Component

Skeleton renders a pulsing placeholder for loading content

@feedback.Skeleton("text")

func SkeletonGroup ¶

func SkeletonGroup(variants []SkeletonVariant) templ.Component

SkeletonGroup renders multiple skeleton placeholders under a single role="status" announcement to avoid redundant screen-reader reads.

@feedback.SkeletonGroup([]string{"title", "text", "text", "text"})

func Spinner ¶

func Spinner(props SpinnerProps) templ.Component

Spinner renders a simple animated loading spinner

@feedback.Spinner(feedback.SpinnerProps{Size: feedback.SpinnerMD, Color: "text-blue-600"})

package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/feedback"
)

func main() {
	var buf bytes.Buffer
	_ = feedback.Spinner(feedback.SpinnerProps{Size: feedback.SpinnerMD, Color: "text-blue-600"}).
		Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

Output:

func StepIndicator ¶

func StepIndicator(props StepIndicatorProps) templ.Component

StepIndicator renders a step indicator (horizontal or vertical)

@feedback.StepIndicator(feedback.StepIndicatorProps{Steps: []string{"Details", "Review", "Confirm"}, CurrentStep: 1})

func Toast ¶

func Toast(props ToastProps) templ.Component

Toast renders a single toast notification (server-side rendered) For HTMX responses, use ToastContainer + the tcShowToast() JS function

@feedback.Toast(feedback.ToastProps{Message: "Saved!", Type: feedback.ToastSuccess})

package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/feedback"
)

func main() {
	props := feedback.DefaultToastProps()
	props.Type = feedback.ToastInfo
	props.Title = "Notification"
	props.Message = "You have a new message."

	var buf bytes.Buffer
	_ = feedback.Toast(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

Output:

func ToastContainer ¶

func ToastContainer(nonce string) templ.Component

ToastContainer renders the fixed-position container for toasts Place this once near the top of your body

@feedback.ToastContainer()