Buttons

View Original

Buttons are a fundamental element of any user interface. Users can use them to trigger actions, such as submitting a form, opening a modal, or navigating to another page.

Goshtoso Component

Go + Templ

Sizes

Disabled

HTMX Interactions

Click to load...

Usage Example

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

// Secondary Button  
@button.Button(button.Config{
    Variant: button.Secondary,
    Type:    "button",
}) {
    Secondary
}

// With HTMX - Basic POST
@button.Button(button.Config{
    Variant: button.Primary,
    Type:    "button",
    HTMX: &button.HTMXConfig{
        Post:   "/api/action",
        Target: "#result",
        Swap:   "innerHTML",
    },
}) {
    Submit
}

// With HTMX - GET Request
@button.Button(button.Config{
    Variant: button.Info,
    Type:    "button",
    HTMX: &button.HTMXConfig{
        Get:     "/api/data",
        Target:  "#data-container",
        Trigger: "click",
    },
}) {
    Load Data
}

// With HTMX - With Loading State
@button.Button(button.Config{
    Variant:    button.Secondary,
    Type:       "button",
    LoadingText: "Loading...",
    HTMX: &button.HTMXConfig{
        Post:      "/api/process",
        Target:    "#output",
        Indicator: "#spinner",
    },
}) {
    Process
}

// With HTMX - Confirm Dialog
@button.Button(button.Config{
    Variant: button.Danger,
    Type:    "button",
    HTMX: &button.HTMXConfig{
        Delete:  "/api/item/123",
        Confirm: "Are you sure you want to delete this?",
        Target:  "#item-123",
        Swap:    "outerHTML",
    },
}) {
    Delete
}

Tabs Checkbox