{% set variant = variant|default(type|default('primary')) %}
{% set size = size|default('md') %}
{% set href = href|default(null) %}
{% set disabled = disabled|default(false) %}
{% set loading = loading|default(false) %}
{% set iconOnly = icon_only|default(false) %}
{% set variantClasses = {
    primary: 'btn-primary',
    secondary: 'btn-secondary',
    outline: 'btn-outline',
    ghost: 'btn-ghost',
    danger: 'btn-danger',
    success: 'btn-success'
} %}
{% set classes = [
    'btn',
    variantClasses[variant]|default('btn-primary'),
    size == 'sm' ? 'btn-sm' : '',
    iconOnly ? 'btn-icon btn-icon-only' : '',
    loading ? 'btn-loading' : '',
    class|default('')
]|filter(value => value)|join(' ') %}
{% set accessibleLabel = aria_label|default(iconOnly ? label|default('') : '') %}

{% if href %}
    <a
        href="{{ disabled or loading ? '#' : href }}"
        class="{{ classes }}"
        {% if disabled or loading %}aria-disabled="true" tabindex="-1"{% endif %}
        {% if loading %}aria-busy="true"{% endif %}
        {% if accessibleLabel %}aria-label="{{ accessibleLabel }}"{% endif %}
        {{ attributes|default('')|raw }}
    >
        {% if icon is defined %}<span aria-hidden="true">{{ icon|raw }}</span>{% endif %}
        {% if not iconOnly %}<span data-button-label>{{ label|default('')|raw }}</span>{% endif %}
    </a>
{% else %}
    <button
        type="{{ buttonType|default('button') }}"
        class="{{ classes }}"
        {% if disabled or loading %}disabled{% endif %}
        {% if loading %}aria-busy="true"{% endif %}
        {% if accessibleLabel %}aria-label="{{ accessibleLabel }}"{% endif %}
        {% if name is defined %}name="{{ name }}"{% endif %}
        {% if value is defined %}value="{{ value }}"{% endif %}
        {{ attributes|default('')|raw }}
    >
        {% if icon is defined %}<span aria-hidden="true">{{ icon|raw }}</span>{% endif %}
        {% if not iconOnly %}<span data-button-label>{{ loading ? loading_label|default('Procesando...') : label|default('')|raw }}</span>{% endif %}
    </button>
{% endif %}