{# TODO: 타입 체크 or 자동 완성을 지원할 수 있는 방법은? #} {# ButtonColor = Literal["neutral", "primary", "secondary", "accent", "info", "success", "warning", "error", "none"] #} {# ButtonStyle = Literal["outline", "dash", "soft", "ghost", "link"] #} {# ButtonSize = Literal["xs", "sm", "md", "lg", "xl"] #} <{{ tag }} class=" select-none relative {% if disabled %} cursor-not-allowed opacity-50 {% else %} cursor-pointer {% endif %} {% if color|lower == "neutral" %} {% if style == "outline" %} inline-block text-gray-900 border-2 border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-gray-900 border-2 border-dashed border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-gray-900 bg-gray-100/50 hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-gray-900 bg-transparent hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-gray-900 bg-transparent hover:underline hover:text-gray-700 focus:ring-4 focus:ring-gray-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "primary" %} {% if style == "outline" %} inline-block text-blue-700 border-2 border-blue-700 bg-transparent hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-blue-700 border-2 border-dashed border-blue-700 bg-transparent hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-blue-700 bg-blue-100/50 hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-blue-700 bg-transparent hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-blue-700 bg-transparent hover:underline hover:text-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "secondary" %} {% if style == "outline" %} inline-block text-gray-600 border-2 border-gray-600 bg-transparent hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-gray-600 border-2 border-dashed border-gray-600 bg-transparent hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-gray-600 bg-gray-100/50 hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-gray-600 bg-transparent hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-gray-600 bg-transparent hover:underline hover:text-gray-700 focus:ring-4 focus:ring-gray-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-gray-600 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "accent" %} {% if style == "outline" %} inline-block text-purple-600 border-2 border-purple-600 bg-transparent hover:bg-purple-50 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-purple-600 border-2 border-dashed border-purple-600 bg-transparent hover:bg-purple-50 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-purple-600 bg-purple-100/50 hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-purple-600 bg-transparent hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-purple-600 bg-transparent hover:underline hover:text-purple-700 focus:ring-4 focus:ring-purple-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "info" %} {% if style == "outline" %} inline-block text-blue-500 border-2 border-blue-500 bg-transparent hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-blue-500 border-2 border-dashed border-blue-500 bg-transparent hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-blue-500 bg-blue-100/50 hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-blue-500 bg-transparent hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-blue-500 bg-transparent hover:underline hover:text-blue-600 focus:ring-4 focus:ring-blue-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "success" %} {% if style == "outline" %} inline-block text-green-600 border-2 border-green-600 bg-transparent hover:bg-green-50 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-green-600 border-2 border-dashed border-green-600 bg-transparent hover:bg-green-50 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-green-600 bg-green-100/50 hover:bg-green-100 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-green-600 bg-transparent hover:bg-green-100 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-green-600 bg-transparent hover:underline hover:text-green-700 focus:ring-4 focus:ring-green-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "warning" %} {% if style == "outline" %} inline-block text-yellow-500 border-2 border-yellow-500 bg-transparent hover:bg-yellow-50 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-yellow-500 border-2 border-dashed border-yellow-500 bg-transparent hover:bg-yellow-50 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-yellow-500 bg-yellow-100/50 hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-yellow-500 bg-transparent hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-yellow-500 bg-transparent hover:underline hover:text-yellow-600 focus:ring-4 focus:ring-yellow-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-yellow-500 hover:bg-yellow-600 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "error" %} {% if style == "outline" %} inline-block text-red-600 border-2 border-red-600 bg-transparent hover:bg-red-50 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "dash" %} inline-block text-red-600 border-2 border-dashed border-red-600 bg-transparent hover:bg-red-50 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "soft" %} inline-block text-red-600 bg-red-100/50 hover:bg-red-100 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "ghost" %} inline-block text-red-600 bg-transparent hover:bg-red-100 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-center mr-2 mb-2 {% elif style == "link" %} inline-block text-red-600 bg-transparent hover:underline hover:text-red-700 focus:ring-4 focus:ring-red-300 font-medium text-center mr-2 mb-2 {% else %} inline-block text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-center mr-2 mb-2 {% endif %} {% elif color|lower == "none" %} {# class 로 직접 지정 #} {% endif %} {% if size|lower == "xs" %}text-xs px-2 py-1 {% elif size|lower == "sm" %}text-sm px-3 py-1.5 {% elif size|lower == "md" %}text-sm px-5 py-2.5 {% elif size|lower == "lg" %}text-base px-6 py-3 {% elif size|lower == "xl" %}text-lg px-8 py-3.5 {% else %} {# none #} {% endif %} {{ attrs.class }} " {{ attrs }} {% if link and not disabled %}href="{{ link }}"{% endif %} {# htmx #} {% if not disabled %} {% if hx_get %}hx-get="{{ hx_get }}"{% endif %} {% if hx_post %}hx-post="{{ hx_post }}"{% endif %} {% if hx_put %}hx-put="{{ hx_put }}"{% endif %} {% if hx_delete %}hx-delete="{{ hx_delete }}"{% endif %} {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %} {% if hx_target %}hx-target="{{ hx_target }}"{% endif %} {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %} {% endif %} {% if hx_vals %} hx-vals="{{ hx_vals }}" {% endif %} {% if confirm %} hx-confirm="{{ confirm }}" {% endif %} {# tooltip #} {% if tooltip %} x-data="{ tooltip: false }" x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" {% endif %} {% if onclick and not disabled %}@click="{{ onclick }}"{% endif %} > {% if tooltip %}
{{ tooltip }}
{% endif %} {{ label }} {{ slot }}