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 control markup is shared via utils.DismissButton; only the style classes differ from errorpage.ErrorAlert. 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 FeedbackTypeIsValid ¶ added in v0.7.0

func FeedbackTypeIsValid(t FeedbackType) bool

FeedbackTypeIsValid reports whether the FeedbackType value is one of the four defined constants (Success, Error, Warning, Info).

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 ProgressBarSizeIsValid ¶ added in v0.7.0

func ProgressBarSizeIsValid(v ProgressBarSize) bool

ProgressBarSizeIsValid reports whether v is one of the defined ProgressBarSize constants.

func Skeleton ¶

func Skeleton(variant SkeletonVariant) templ.Component

Skeleton renders a pulsing placeholder for loading content

@feedback.Skeleton("text")

func SkeletonCardGrid ¶ added in v0.7.0

func SkeletonCardGrid(count int) templ.Component

SkeletonCardGrid renders a responsive grid of N skeleton cards — the common "loading state" for a dashboard card list. It wraps SkeletonGroup so the whole grid shares one `role="status"` announcement, and uses the same responsive grid classes as display.Grid. Negative or zero counts render a single placeholder card so consumers never see an empty container.

@feedback.SkeletonCardGrid(6)
@feedback.SkeletonCardGrid(12)  // 3x4 grid at lg breakpoint

package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	var buf bytes.Buffer
	_ = feedback.SkeletonCardGrid(6).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain a responsive grid of skeleton loading cards
}

Output:

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 SkeletonVariantIsValid ¶ added in v0.7.0

func SkeletonVariantIsValid(v SkeletonVariant) bool

SkeletonVariantIsValid reports whether v is one of the defined SkeletonVariant constants.

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 dark:text-blue-400"})

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 SpinnerSizeIsValid ¶ added in v0.7.0

func SpinnerSizeIsValid(v SpinnerSize) bool

SpinnerSizeIsValid reports whether v is one of the defined SpinnerSize constants.

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 StepIndicatorOrientationIsValid ¶ added in v0.8.0

func StepIndicatorOrientationIsValid(v StepIndicatorOrientation) bool

StepIndicatorOrientationIsValid reports whether v is one of the defined StepIndicatorOrientation constants.

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()