{% load mvp %}
<c-vars size
        text
        variant
        outline
        align="center"
        icon
        class
        ghost
        gap="2"
        :condition="True"
        reverse />
{% if condition %}
  {% spaceless %}
    {% with element=href|yesno:"a,button" %}
      {# djlint:off #}
      <{{ element }} class="btn{% if variant %} btn-{{ variant }}{% endif %}{% if outline %} btn-outline{% endif %} {% variation size "btn" "sm,md,lg" %}{% if ghost %} btn-ghost{% endif %} inline-flex items-center justify-{{ align }}{% if reverse %} flex-row-reverse{% endif %} gap-{{ gap }} {{ class }}" {{ attrs }}>
        {% if icon %}<c-icon name="{{icon }}" />{% endif %}
        {% if text %}<span>{{ text }}</span>{% endif %}
        {{ slot }}
      </{{ element }}>
      {# djlint:on #}
    {% endwith %}
  {% endspaceless %}
{% endif %}