Button Dynamic attributes

[marcuoli]

Hello guys, maybe an easy question but I can't find the answer anywhere. How to achieve this ?

templ ModalButton(buttonType string, text string, isPrimary bool, onClick string) {
    <button
        type={ buttonType }
        class={
            if isPrimary {
                "px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600"
            } else {
                "px-4 py-2 text-sm font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200"
            }
        }
        if onClick != "" {
            @click={ onClick }
        }
    >
        { text }
    </button>
}

Thanks !

Marcus

[a-h]

It's covered (but maybe not with enough examples) in https://templ.guide/syntax-and-usage/css-style-management#dynamic-class-names

Something like this is probably what you want.

templ ModalButton(buttonType string, text string, isPrimary bool, onClick string) {
    <button
        type={ buttonType }
        class={
            "px-4 py-2 text-sm font-medium rounded-md",
            templ.KV("text-white bg-blue-500 hover:bg-blue-600", isPrimary),
            templ.KV("text-gray-700 bg-gray-100 hover:bg-gray-200", !isPrimary)
        }
        if onClick != "" {
            @click={ onClick }
        }
    >
        { text }
    </button>
}

I'd happily take a PR with use case examples.

[joerdav]

I've also seen examples of people creating a iif function, to reduce the need for referencing the bool twice:

templ ModalButton(buttonType string, text string, isPrimary bool, onClick string) {
    <button
        type={ buttonType }
        class={
            "px-4 py-2 text-sm font-medium rounded-md",
            iif(
                 isPrimary, 
                 "text-white bg-blue-500 hover:bg-blue-600", 
                 "text-gray-700 bg-gray-100 hover:bg-gray-200",
           ),
        }
        if onClick != "" {
            @click={ onClick }
        }
    >
        { text }
    </button>
}

func iif(cond bool, iftrue, iffalse string) string {
    if cond {
        return iftrue
    }
    return iffalse
}

[pharrisee]

Using the iif variant also allows the usage of something like https://github.com/Oudwins/tailwind-merge-go to merge classes of the same type (p-, m-, etc) correctly:

import (
    twmerge "github.com/Oudwins/tailwind-merge-go"
)

templ ModalButton(buttonType string, text string, isPrimary bool, onClick string) {
    <button
        type={ buttonType }
        class={ twmerge.Merge(
            "px-4 py-2 text-sm font-medium rounded-md text-black",
            iif(
               isPrimary, 
               "text-white bg-blue-500 hover:bg-blue-600", 
               "text-gray-700 bg-gray-100 hover:bg-gray-200 text-md",
               ),
           ),
        }
        if onClick != "" {
            @click={ onClick }
        }
    >
        { text }
    </button>
}

func iif(cond bool, iftrue, iffalse string) string {
    if cond {
        return iftrue
    }
    return iffalse
}

In the case above the text size and color classes get replaced correctly without duplication.
(assuming I've got the syntax correct)