{{ button_tag = href ? 'a' : 'button' }}
<{{ button_tag }}
    type="{{ type ?? 'submit' }}"
    class="
        font-headline uppercase rounded transition-colors border
        {{ if size === 'sm' }} py-1.5 px-4 text-sm {{ else }} py-2 px-6 {{ /if }}
        {{ if full-width }} w-full {{ /if }}
        {{ if bg-color }}
            bg-{{ convert_color:bg_to_button_bg :color="bg-color" }}
            border-{{ convert_color:bg_to_button_bg :color="bg-color" }}
            text-{{ convert_color:bg_to_button_text :color="bg-color" }}
            hover:bg-{{ convert_color:bg_to_button_hover_bg :color="bg-color" }}
            group-hover:bg-{{ convert_color:bg_to_button_hover_bg :color="bg-color" }}
            group-hover:border-{{ convert_color:bg_to_button_hover_bg :color="bg-color" }}
        {{ else }}
            bg-red text-white hover:bg-black group-hover:bg-black border-red hover:border-black group-hover:border-black
        {{ /if }}
        {{ class }}
    "
    {{ if href }} href="{{ href }}" {{ /if }}
    {{ if click }} @click="{{ click }}" {{ /if }}
>
    {{ if text }} {{ text }} {{ /if }}
    {{ slot }}
</{{ button_tag }}>