feedback

package
v1.27.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Nov 4, 2026 License: MIT Imports: 9 Imported by: 5

Documentation

Overview

Package feedback provides user feedback components including alerts, toasts, loading overlays, and step indicators.

Feedback style lookups: shared style sets, icon mapping, and generic enum lookup.

Index

Examples

Constants

View Source 
const (
	ToastDurationShort  = 3000
	ToastDurationMedium = 5000
	ToastDurationLong   = 8000
)

Default toast durations

Variables

This section is empty.

Functions

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.FeedbackError})

The ARIA role derives from Type: errors announce assertively (role="alert"); every other type reports politely (role="status") so a success banner is never read as an error by screen readers.

The dismiss control markup is shared via utils.DismissButton; only the style classes differ from errorpage.ErrorAlert. JS behaviour is shared via utils.DismissScript().

Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := feedback.DefaultAlertProps()
	props.Type = feedback.FeedbackSuccess
	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())
}

func CircularProgress added in v1.8.2 

func CircularProgress(props CircularProgressProps) templ.Component

CircularProgress renders a circular SVG progress indicator with an optional percentage label. The value is clamped to [0, 100]. 

@feedback.CircularProgress(feedback.CircularProgressProps{Value: 75, ShowLabel: true})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	var buf bytes.Buffer

	_ = feedback.CircularProgress(feedback.CircularProgressProps{
		Value:     75,
		ShowLabel: true,
	}).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain a circular SVG progress ring showing 75%
}

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")
Example 
package main

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

func main() {
	_ = feedback.InlineError("Something went wrong")
}

func InlineLoading 

func InlineLoading(message string) templ.Component

InlineLoading renders a compact inline loading indicator 

@feedback.InlineLoading("Saving...")
Example 
package main

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

func main() {
	_ = feedback.InlineLoading("Saving...")
}

func InlineSuccess 

func InlineSuccess(message string) templ.Component

InlineSuccess renders a compact inline success message 

@feedback.InlineSuccess("Saved successfully")
Example 
package main

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

func main() {
	_ = feedback.InlineSuccess("Changes saved")
}

func LoadingOverlay 

func LoadingOverlay(props LoadingOverlayProps) templ.Component

LoadingOverlay renders a STATIC loading overlay: a positioned region (full-screen by default; scope it to a container with `Class: "absolute"` inside a `relative` frame) that announces its loading state politely.

It deliberately carries NO dialog semantics — a div with role="dialog" aria-modal="true" promises focus containment and an inert page it never delivered. Use the status semantics here when the page behind the overlay must stay reachable, and @display.LoadingDialog when you need a real blocking modal (native <dialog>: focus trap, inert page, Escape). 

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

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

func main() {
	_ = feedback.LoadingOverlay(feedback.DefaultLoadingOverlayProps())
}

func ProgressBar 

func ProgressBar(props ProgressBarProps) templ.Component

ProgressBar renders a progress indicator 

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

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

func main() {
	_ = feedback.ProgressBar(feedback.DefaultProgressBarProps())
}

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")
Example 
package main

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

func main() {
	_ = feedback.Skeleton(feedback.SkeletonText)
}

func SkeletonCardGrid added in v0.7.0 

func SkeletonCardGrid(props SkeletonCardGridProps) 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(feedback.SkeletonCardGridProps{Count: 6})
@feedback.SkeletonCardGrid(feedback.SkeletonCardGridProps{Count: 12, ContainerAware: true})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	var buf bytes.Buffer

	_ = feedback.SkeletonCardGrid(feedback.SkeletonCardGridProps{Count: 6}).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain a responsive grid of skeleton loading cards
}

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"})
Example 
package main

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

func main() {
	_ = feedback.SkeletonGroup([]feedback.SkeletonVariant{feedback.SkeletonTitle, feedback.SkeletonText})
}

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"})
Example 
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())
}

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})
Example 
package main

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

func main() {
	_ = feedback.StepIndicator(feedback.DefaultStepIndicatorProps())
}

func StepIndicatorOrientationIsValid added in v0.8.0 

func StepIndicatorOrientationIsValid(v StepIndicatorOrientation) bool

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

func StepStateIsValid added in v1.24.0 

func StepStateIsValid(v StepState) bool

StepStateIsValid reports whether v is one of the defined StepState 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.FeedbackSuccess})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

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

func main() {
	props := feedback.DefaultToastProps()
	props.Type = feedback.FeedbackInfo
	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())
}

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()
Example 
package main

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

func main() {
	_ = feedback.ToastContainer("")
}

Types

type AlertProps 

type AlertProps struct {
	utils.BaseProps
	Title       string
	Message     string
	Type        FeedbackType
	Dismissible bool
}

AlertProps configures an alert banner

func DefaultAlertProps 

func DefaultAlertProps() AlertProps

DefaultAlertProps returns sensible defaults

type CircularProgressProps added in v1.8.2 

type CircularProgressProps struct {
	utils.BaseProps
	// Value is the percentage (0–100). Values outside the range are clamped.
	Value int
	// Size controls the rendered diameter. Defaults to md.
	Size CircularProgressSize
	// ShowLabel renders the numeric percentage in the centre.
	ShowLabel bool
	// Color overrides the progress arc colour (Tailwind stroke utility).
	// Defaults to text-blue-600 dark:text-blue-500.
	Color tone.ColorClass
	// TrackColor overrides the background track colour.
	// Defaults to text-gray-200 dark:text-gray-700.
	TrackColor tone.ColorClass
}

CircularProgressProps configures a circular SVG progress indicator.

func DefaultCircularProgressProps added in v1.8.2 

func DefaultCircularProgressProps() CircularProgressProps

DefaultCircularProgressProps returns sensible defaults.

type CircularProgressSize added in v1.8.2 

type CircularProgressSize string

CircularProgressSize controls the diameter of the ring. 

const (
	CircularProgressSizeSM CircularProgressSize = "sm"
	CircularProgressSizeMD CircularProgressSize = "md"
	CircularProgressSizeLG CircularProgressSize = "lg"
)

type FeedbackType 

type FeedbackType string

FeedbackType represents the severity/visual style of a feedback component. Shared by Alert and Toast components. 

const (
	FeedbackSuccess FeedbackType = "success"
	FeedbackError   FeedbackType = "error"
	FeedbackWarning FeedbackType = "warning"
	FeedbackInfo    FeedbackType = "info"
)

Feedback severity levels shared by Alert and Toast components.

func (FeedbackType) Tone added in v1.24.0 

func (t FeedbackType) Tone() tone.Tone

Tone maps FeedbackType onto the canonical semantic axis (utils/tone Phase 0, TODO #425). The "error" spelling maps to Danger — the canonical spelling this library converges on at v2 (ADR-0022 removes the alias; the value rename rides the #431 batch).

type LoadingOverlayProps 

type LoadingOverlayProps struct {
	utils.BaseProps
	Message      string
	ShowProgress bool
	Progress     int
}

LoadingOverlayProps configures a static loading overlay (see LoadingOverlay for the semantics split).

func DefaultLoadingOverlayProps 

func DefaultLoadingOverlayProps() LoadingOverlayProps

DefaultLoadingOverlayProps returns sensible defaults

type ProgressBarProps 

type ProgressBarProps struct {
	utils.BaseProps
	Current       int
	Total         int
	Label         string
	Size          ProgressBarSize
	Color         tone.ColorClass
	ShowLabel     bool
	Indeterminate bool
}

ProgressBarProps configures a progress bar

func DefaultProgressBarProps 

func DefaultProgressBarProps() ProgressBarProps

DefaultProgressBarProps returns sensible defaults

type ProgressBarSize 

type ProgressBarSize string

ProgressBarSize defines the height of a progress bar 

const (
	ProgressBarSizeSM ProgressBarSize = "sm"
	ProgressBarSizeMD ProgressBarSize = "md"
	ProgressBarSizeLG ProgressBarSize = "lg"
)

type SkeletonCardGridProps added in v1.3.0 

type SkeletonCardGridProps struct {
	// Count is the number of skeleton cards to render. Negative or zero
	// renders a single placeholder so consumers never see an empty container.
	Count int
	// ContainerAware, when true, wraps the grid in a @container div and uses
	// container-query variants (@sm:, @lg:) so the skeleton grid matches the
	// behavior of display.Grid with ContainerAware: true. Useful when
	// the skeleton grid is placed inside a sidebar, card, or other constrained
	// layout. Default false (viewport breakpoints). See ADR-0018.
	ContainerAware bool
}

SkeletonCardGridProps configures a responsive grid of skeleton cards — the common "loading state" for a dashboard card list.

func DefaultSkeletonCardGridProps added in v1.3.0 

func DefaultSkeletonCardGridProps() SkeletonCardGridProps

DefaultSkeletonCardGridProps returns sensible defaults.

type SkeletonVariant 

type SkeletonVariant string

SkeletonVariant defines the shape of a skeleton placeholder 

const (
	SkeletonText      SkeletonVariant = "text"
	SkeletonTextShort SkeletonVariant = "text-short"
	SkeletonTitle     SkeletonVariant = "title"
	SkeletonAvatar    SkeletonVariant = "avatar"
	SkeletonImage     SkeletonVariant = "image"
	SkeletonCard      SkeletonVariant = "card"
	SkeletonTableRow  SkeletonVariant = "table-row"
)

type SpinnerProps added in v0.3.0 

type SpinnerProps struct {
	utils.BaseProps
	Size  SpinnerSize
	Color tone.ColorClass
}

SpinnerProps configures a loading spinner component

func DefaultSpinnerProps added in v0.3.0 

func DefaultSpinnerProps() SpinnerProps

DefaultSpinnerProps returns sensible defaults

type SpinnerSize 

type SpinnerSize string

SpinnerSize defines the size of a loading spinner 

const (
	SpinnerSM SpinnerSize = "sm"
	SpinnerMD SpinnerSize = "md"
	SpinnerLG SpinnerSize = "lg"
)

type StepIndicatorOrientation 

type StepIndicatorOrientation string

StepIndicatorOrientation defines the layout direction of a step indicator 

const (
	StepHorizontal StepIndicatorOrientation = "horizontal"
	StepVertical   StepIndicatorOrientation = "vertical"
)

type StepIndicatorProps 

type StepIndicatorProps struct {
	utils.BaseProps
	Steps       []string
	CurrentStep int
	Orientation StepIndicatorOrientation
}

StepIndicatorProps configures a step/progress indicator

func DefaultStepIndicatorProps 

func DefaultStepIndicatorProps() StepIndicatorProps

DefaultStepIndicatorProps returns sensible defaults

type StepState added in v1.24.0 

type StepState string

StepState is the lifecycle state of a single step relative to CurrentStep: steps before it are Complete, the step at it is Current, later steps are Pending. 

const (
	StepStateComplete StepState = "complete"
	StepStateCurrent  StepState = "current"
	StepStatePending  StepState = "pending"
)

type ToastProps 

type ToastProps struct {
	utils.BaseProps
	Message  string
	Title    string
	Type     FeedbackType
	Duration int // milliseconds, 0 for no auto-dismiss
}

ToastProps configures a toast notification

func DefaultToastProps 

func DefaultToastProps() ToastProps

DefaultToastProps returns sensible defaults

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.