{% load components %}

{% if href %}
    <a
        href="{{ href }}"
        class="
            usa-button usx-button
            {% if variant %} usa-button--{{ variant }}{% endif %}
            {% if big == True %} usa-button--big{% endif %}
            {% if disabled == True %} usa-button--disabled{% endif %}
            {% if inverse == True %} usa-button--inverse{% endif %}
            {% if ghost == True %} usx-button--ghost{% endif %}
            {% if className %} {{ className }}{% endif %}
        "
        {% if disabled == True %} aria-disabled="true" {% endif %}
        {% if isExternal %} target="_blank" rel="noopener noreferrer" {% endif %}
    >
{% else %}

    <button
        type="{{ type|default:'button' }}"
        class="
            usa-button usx-button
            {% if variant %} usa-button--{{ variant }}{% endif %}
            {% if big == True %} usa-button--big{% endif %}
            {% if disabled == True %} usa-button--disabled{% endif %}
            {% if inverse == True %} usa-button--inverse{% endif %}
            {% if ghost == True %} usx-button--ghost{% endif %}
            {% if className %} {{ className }}{% endif %}
        "
        {% if disabled == True %} disabled="disabled" aria-disabled="true" {% endif %}
        {% if extraAttributes %}{% for attr, value in extraAttributes.items %} {{ attr }}="{{ value }}"{% endfor %}{% endif %}
    >
{% endif %}
    {% if loading %}
        {% spinner size=2 %}{% endspinner %}
    {% endif %}
    {% for i in iconProps %}
        {% if i.name %}
            {% if not i.position or i.position == 'left' %}
                {% icon name=i.name color=i.color size=i.size className=i.className alt=i.alt staticUrlPrefix=i.staticUrlPrefix %}{% endicon %}
            {% endif %}
        {% endif %}
    {% endfor %}

    {% if children %}{{ children }}{% elif label %}{{ label }}{% endif %}

    {% for i in iconProps %}
        {% if i.name and i.position == 'right' %}
            {% icon name=i.name color=i.color size=i.size className=i.className alt=i.alt staticUrlPrefix=i.staticUrlPrefix %}{% endicon %}
        {% endif %}
    {% endfor %}

{% if href %}
    </a>
{% else %}
    </button>
{% endif %}