mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:31:09 -05:00
72 lines
2.2 KiB
HTML
72 lines
2.2 KiB
HTML
{% comment %}
|
|
Button Component - Django Cotton Version of shadcn/ui Button
|
|
Usage: <c-button variant="default" size="default">Click me</c-button>
|
|
Preserves EXACT same HTML output as the original include version
|
|
{% endcomment %}
|
|
|
|
<c-vars
|
|
variant="default"
|
|
size="default"
|
|
icon_left=""
|
|
icon_right=""
|
|
type=""
|
|
onclick=""
|
|
hx_get=""
|
|
hx_post=""
|
|
hx_target=""
|
|
hx_swap=""
|
|
x_data=""
|
|
x_on=""
|
|
disabled=""
|
|
/>
|
|
|
|
<button
|
|
class="
|
|
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium
|
|
ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2
|
|
focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
|
|
{% if variant == 'default' %}
|
|
bg-primary text-primary-foreground hover:bg-primary/90
|
|
{% elif variant == 'destructive' %}
|
|
bg-destructive text-destructive-foreground hover:bg-destructive/90
|
|
{% elif variant == 'outline' %}
|
|
border border-input bg-background hover:bg-accent hover:text-accent-foreground
|
|
{% elif variant == 'secondary' %}
|
|
bg-secondary text-secondary-foreground hover:bg-secondary/80
|
|
{% elif variant == 'ghost' %}
|
|
hover:bg-accent hover:text-accent-foreground
|
|
{% elif variant == 'link' %}
|
|
text-primary underline-offset-4 hover:underline
|
|
{% endif %}
|
|
{% if size == 'default' %}
|
|
h-10 px-4 py-2
|
|
{% elif size == 'sm' %}
|
|
h-9 rounded-md px-3
|
|
{% elif size == 'lg' %}
|
|
h-11 rounded-md px-8
|
|
{% elif size == 'icon' %}
|
|
h-10 w-10
|
|
{% endif %}
|
|
{{ class|default:'' }}
|
|
"
|
|
{% if type %}type="{{ type }}"{% endif %}
|
|
{% if onclick %}onclick="{{ onclick }}"{% endif %}
|
|
{% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
|
|
{% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
|
|
{% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
|
|
{% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
|
|
{% if x_data %}x-data="{{ x_data }}"{% endif %}
|
|
{% if x_on %}{{ x_on }}{% endif %}
|
|
{% if disabled %}disabled{% endif %}
|
|
{{ attrs }}
|
|
>
|
|
{% if icon_left %}
|
|
<i class="{{ icon_left }} w-4 h-4"></i>
|
|
{% endif %}
|
|
|
|
{{ slot }}
|
|
|
|
{% if icon_right %}
|
|
<i class="{{ icon_right }} w-4 h-4"></i>
|
|
{% endif %}
|
|
</button> |