Button

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

Default Rendered example

Usage Example

@button.Button() { Primary }
@button.Button(button.WithTone(button.ToneSecondary)) { Secondary }
@button.Button(button.WithTone(button.ToneDanger)) { Danger }
@button.Button(button.WithTone(button.ToneSuccess)) { Success }

Sizes

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

Size

sm md lg xl

Sizes Rendered example

Sizes

@button.Button(button.WithSize(button.SizeLarge)) { Large }

Disabled

Disabled: true blocks interaction and dims the button.

Disabled Rendered example

Disabled

@button.Button(button.Disabled()) { Primary }

Native form actions

Use WithAttrs for native name, value, formaction, data-*, or aria-* attributes not covered by a dedicated option.

Native form actions Rendered example

Native form actions

@button.Button(
    button.WithType("submit"),
    button.WithTone(button.ToneAlternate),
    button.WithAttrs(templ.Attributes{"name": "action", "value": "back"}),
) { Back }

@button.Button(
    button.WithType("submit"),
    button.WithAttrs(templ.Attributes{"name": "action", "value": "continue"}),
) { Continue }

HTMX Interactions

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

HTMX Interactions Rendered example

Waiting for server response...

HTMX Interactions

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

@button.Button(
    button.WithTone(button.ToneInfo),
    button.WithRootClass("w-full sm:w-44 justify-center"),
    button.WithHTMX(&button.HTMXConfig{Get: "/api/hello", Target: "#htmx-result-get", Swap: "innerHTML"}),
) { Send GET }

@button.Button(
    button.WithTone(button.ToneDanger),
    button.WithRootClass("w-full sm:w-44 justify-center"),
    button.WithHTMX(&button.HTMXConfig{Delete: "/api/hello", Confirm: "Are you sure?", Target: "#htmx-result-delete", Swap: "innerHTML"}),
) { Delete }

Form-owned HTMX loading

LoadingText also follows an ancestor form request. Disable the submitter from the form so repeated activation cannot queue a duplicate mutation.

Form-owned HTMX loading Rendered example

Form-owned HTMX loading

<form
    hx-post="/save"
    hx-target="#save-result"
    hx-disabled-elt="find button[type='submit']">
    @button.Button(
        button.WithType("submit"),
        button.WithLoadingText("Saving…"),
    ) { Save }
</form>

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/button

Open v0.2.7 API

Table Checkbox