Button

The most-used component. Supports variants, sizes, loading states, icon-only mode, and full HTMX passthrough via Attrs.

Variants

Component
@button.Button(button.Props{Variant: button.VariantPrimary}) { Primary }
@button.Button(button.Props{Variant: button.VariantSecondary}) { Secondary }
@button.Button(button.Props{Variant: button.VariantOutline}) { Outline }
@button.Button(button.Props{Variant: button.VariantGhost}) { Ghost }
@button.Button(button.Props{Variant: button.VariantDestructive}) { Destructive }
@button.Button(button.Props{Variant: button.VariantLink}) { Link }

Sizes

Component
@button.Button(button.Props{Size: button.SizeXS}) { Extra Small }
@button.Button(button.Props{Size: button.SizeSM}) { Small }
@button.Button(button.Props{Size: button.SizeMD}) { Medium }
@button.Button(button.Props{Size: button.SizeLG}) { Large }
@button.Button(button.Props{Size: button.SizeXL}) { Extra Large }

With HTMX

Pass any hx-* attribute via the Attrs field.

handler.go
func (h *Handler) Submit(w http.ResponseWriter, r *http.Request) {
    // Process...
    templ.Handler(components.SuccessToast()).ServeHTTP(w, r)
}
page.templ
@button.Button(button.Props{
    Variant: button.VariantPrimary,
    Type:    "submit",
    Attrs: templ.Attributes{
        "hx-post":      "/api/submit",
        "hx-target":    "#result",
        "hx-swap":      "outerHTML",
        "hx-indicator": "#spinner",
    },
}) {
    Save changes
}

Disabled & Loading

Component
@button.Button(button.Props{Disabled: true}) { Disabled }
@button.ButtonLoading(button.Props{Variant: button.VariantPrimary}, "Saving...")

Props

PropTypeDefaultDescription
Variant VariantVariantPrimaryVisual style: primary, secondary, outline, ghost, destructive, link
Size SizeSizeMDButton height and padding: xs, sm, md, lg, xl
Type string"button"HTML button type: "button", "submit", or "reset"
Disabled boolfalseDisables click interaction and applies opacity-50
Class string""Extra Tailwind classes merged onto the button
Attrs templ.AttributesnilSpread any HTML attribute: hx-*, data-*, aria-*, @click, etc.