Widgets Feedback

Feedback Widgets

Feedback widgets communicate status, progress, and transient information to the user.

---

ProgressBar

gui.ProgressBar(gui.ProgressBarCfg{...}) renders a horizontal progress bar. It supports both determinate (percentage-based) and indeterminate (animated) modes.

// Determinate
gui.ProgressBar(gui.ProgressBarCfg{
    ID:       "upload",
    Percent:  app.UploadProgress, // 0.0–1.0
    TextShow: true,
    Sizing:   gui.FillFit,
})

// Indeterminate — animated "loading" state
gui.ProgressBar(gui.ProgressBarCfg{
    ID:         "loading",
    Indefinite: true,
    Sizing:     gui.FillFit,
})

---

Pulsar

gui.Pulsar(gui.PulsarCfg{...}, w) alternates between two icon glyphs with a fade animation — a lightweight way to indicate ongoing activity without a full progress bar.

gui.Row(gui.ContainerCfg{
    Sizing:  gui.FillFit,
    Padding: gui.NoPadding,
    Spacing: gui.SomeF(8),
    VAlign:  gui.VAlignMiddle,
    Content: []gui.View{
        gui.Text(gui.TextCfg{Text: "Processing", TextStyle: t.N3}),
        gui.Pulsar(gui.PulsarCfg{
            Text1:     gui.IconSmile,
            Text2:     gui.IconSmileAlt,
            TextStyle: gui.CurrentTheme().Icon1,
        }, w),
    },
})

Note the w argument — Pulsar needs access to the animation subsystem.

---

Toast

w.Toast(gui.ToastCfg{...}) queues a transient notification that appears at the bottom of the window and dismisses automatically after a timeout.

gui.Button(gui.ButtonCfg{
    Content: []gui.View{
        gui.Text(gui.TextCfg{Text: "Save"}),
    },
    OnClick: func(_ *gui.Layout, e *gui.Event, w *gui.Window) {
        saveData(w)
        w.Toast(gui.ToastCfg{
            Message:  "Saved successfully",
            Duration: 3 * time.Second,
        })
        e.IsHandled = true
    },
})

Multiple toasts queue and display sequentially.

---

Dialog

w.Dialog(gui.DialogCfg{...}) shows a modal dialog over the window. Built-in dialog types cover the common patterns; a custom Content field handles anything else.

// Message dialog
w.Dialog(gui.DialogCfg{
    Title:      "Information",
    Body:       "Export complete.",
    DialogType: gui.DialogMessage,
    OnOkYes: func(w *gui.Window) {
        gui.State[App](w).DialogResult = "OK"
    },
})

// Confirm dialog
w.Dialog(gui.DialogCfg{
    Title:      "Delete item?",
    Body:       "This cannot be undone.",
    DialogType: gui.DialogConfirm,
    OnOkYes: func(w *gui.Window) {
        deleteSelected(w)
    },
    OnCancelNo: func(w *gui.Window) {
        // user cancelled — nothing to do
    },
})

DialogType	Buttons shown
DialogMessage	OK
DialogConfirm	Yes / No
DialogOkCancel	OK / Cancel

For fully custom content pass a Content []gui.View instead of Body.

---

WithTooltip

gui.WithTooltip(w, gui.WithTooltipCfg{...}) wraps any view and shows a tooltip on hover. It is a container: the widget it wraps goes in Content.

gui.WithTooltip(w, gui.WithTooltipCfg{
    ID:   "save-btn-tip",
    Text: "Save the current document (Ctrl+S)",
    Content: []gui.View{
        gui.Button(gui.ButtonCfg{
            Content: []gui.View{
                gui.Text(gui.TextCfg{Text: "Save"}),
            },
            OnClick: onSave,
        }),
    },
})

Tooltips inherit the current theme's tooltip style. Position defaults to above the wrapped widget and adjusts automatically at screen edges.

---

Spinner and SVGSpinner

Spinners are animation-driven loading indicators. Go-gui ships over 100 built-in SVG spinner variants accessible by name.

// Named SVG spinner
gui.SVGSpinner(gui.SVGSpinnerCfg{
    Name:   "ring",    // one of 106 built-in variants
    Width:  48,
    Height: 48,
    Color:  gui.CurrentTheme().ColorAccent,
}, w)

Run the showcase and navigate to the Spinner section to preview all variants.

---

Skeleton

gui.Skeleton(gui.SkeletonCfg{...}) renders a shimmer loading placeholder before content arrives. Supports two variants — SkeletonRect and SkeletonCircle — with configurable animation colors.

// Text placeholder row
gui.Skeleton(gui.SkeletonCfg{
    Width:  300,
    Height: 16,
    Radius: gui.SomeF(4),
    Sizing: gui.FillFit,
})

// Avatar placeholder
gui.Skeleton(gui.SkeletonCfg{
    Width:   48,
    Height:  48,
    Variant: gui.SkeletonCircle,
})

The shimmer animation uses the theme's SkeletonStyle.Color and SkeletonStyle.ColorHighlight by default; override via Color and ColorHighlight in the config.