Buttons

Trigger actions — submit a form, open a modal, navigate. Eight color variants, four sizes, disabled state, and first-class HTMX wiring (GET/POST/DELETE, confirm, loading indicator).

Usage Example

@button.Button(button.Config{Variant: button.Primary, Type: "button"}) { Primary }
@button.Button(button.Config{Variant: button.Secondary, Type: "button"}) { Secondary }
@button.Button(button.Config{Variant: button.Danger, Type: "button"}) { Danger }
@button.Button(button.Config{Variant: button.Success, Type: "button"}) { Success }

Sizes

Four sizes via Size: SizeSmall, SizeMedium, SizeLarge, SizeXLarge.

Size

sm md lg xl

Sizes

@button.Button(button.Config{
    Variant: button.Primary,
    Size:    button.SizeMedium,
    Type:    "button",
}) { Medium }

Disabled

Disabled: true blocks interaction and dims the button.

Disabled

@button.Button(button.Config{Variant: button.Primary, Type: "button", Disabled: true}) { Primary }

HTMX Interactions

Attach an HTMX config to fire a request on click. Supports Get/Post/Delete, a Confirm prompt, a loading Indicator, and LoadingText.

Waiting for server response...

HTMX Interactions

@button.Button(button.Config{
    Variant: button.Primary, Type: "button", RootClass: "w-full sm:w-44 justify-center",
    HTMX: &button.HTMXConfig{Post: "/api/hello", Target: "#htmx-result-post", Swap: "innerHTML"},
}) { Send POST }

@button.Button(button.Config{
    Variant: button.Info, Type: "button", RootClass: "w-full sm:w-44 justify-center",
    HTMX: &button.HTMXConfig{Get: "/api/hello", Target: "#htmx-result-get", Swap: "innerHTML"},
}) { Send GET }

@button.Button(button.Config{
    Variant: button.Danger, Type: "button", RootClass: "w-full sm:w-44 justify-center",
    HTMX: &button.HTMXConfig{Delete: "/api/hello", Confirm: "Are you sure?", Target: "#htmx-result-delete", Swap: "innerHTML"},
}) { Delete }

API Reference

Prop	Type	Default	Description
`Variant`	`Variant`	`Primary`	Color: "primary", "secondary", "alternate", "inverse", "info", "danger", "warning", "success".
`Size`	`Size`	`SizeMedium`	Size: "sm", "md", "lg", "xl".
`Type`	`string`	`"button"`	Native button type: "button", "submit", "reset".
`Disabled`	`bool`	`false`	Disable interaction.
`HTMX`	`*HTMXConfig`	`nil`	HTMX wiring (Get/Post/Put/Delete, Target, Swap, Trigger, Confirm, Indicator).
`Alpine`	`*AlpineConfig`	`nil`	Alpine.js directives for client-side behavior.
`LoadingText`	`string`	`""`	Text shown while an HTMX request is in flight.
`ID`	`string`	`""`	Optional element id.
`RootClass`	`string`	`""`	Extra classes on the button.

Table Checkbox