Modal Component - Goshtoso UI Library for Go

Focused overlay content with default and alert variants, plus optional HTMX or JavaScript actions on the primary/secondary buttons.

Usage Example

@modal.Modal(modal.Config{
    ID:            "offer",
    Title:         "Special Offer",
    Body:          "Upgrade your account now to unlock premium features.",
    TriggerLabel:   "Open Modal",
    PrimaryLabel:   "Upgrade Now",
    SecondaryLabel: "Remind me later",
})

Alert Modals

AlertMode: true plus a Variant renders a compact, icon-led alert dialog (Success, Info, Warning, Danger).

Alert Modals

@modal.Modal(modal.Config{
    ID:          "txComplete",
    Title:       "Transaction Complete",
    Body:        "Your funds transfer was successful.",
    TriggerLabel: "Success Modal",
    PrimaryLabel: "Go to My Balance",
    Variant:     modal.Success,
    AlertMode:   true,
})

With HTMX Action

Give a button a PrimaryAction with hx-* fields to fire a server request on confirm.

With HTMX Action

@modal.Modal(modal.Config{
    ID:            "htmxDemo",
    Title:         "Confirm Action",
    Body:          "This will send a request to the server.",
    TriggerLabel:   "HTMX Modal",
    PrimaryLabel:   "Confirm",
    SecondaryLabel: "Cancel",
    PrimaryAction: &modal.ButtonAction{
        HTMX: &modal.HTMXConfig{Post: "/api/hello", Target: "#modal-htmx-result", Swap: "innerHTML"},
    },
})

With JavaScript Action

Use PrimaryAction.OnClick for a client-side handler.

With JavaScript Action

@modal.Modal(modal.Config{
    ID:            "jsDemo",
    Title:         "Confirm Delete",
    Body:          "Are you sure? This cannot be undone.",
    TriggerLabel:   "JS Action Modal",
    PrimaryLabel:   "Delete",
    SecondaryLabel: "Cancel",
    PrimaryAction: &modal.ButtonAction{OnClick: "alert('Deleted!')"},
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id (wires the trigger to the dialog and scopes Alpine state).
`Title`	`string`	`""`	Dialog heading.
`Body`	`string`	`""`	Dialog body text.
`TriggerLabel`	`string`	`""`	Label of the button that opens the modal.
`PrimaryLabel`	`string`	`""`	Primary button label.
`PrimaryAction`	`*ButtonAction`	`nil`	Primary button behavior (OnClick or hx-* fields).
`SecondaryLabel`	`string`	`""`	Secondary button label (omit to hide).
`SecondaryAction`	`*ButtonAction`	`nil`	Secondary button behavior.
`Variant`	`Variant`	`Default`	Alert color: "default", "success", "info", "warning", "danger".
`AlertMode`	`bool`	`false`	Render the compact icon-led alert dialog layout.
`PanelClass`	`string`	`""`	Extra classes on the dialog.

Toast Drawer