{% load cf_ui %}
{% cf_ui_class as cf_class %}
  btn
  {% if variant == 'primary' %}
    btn-primary
  {% elif variant == 'secondary' %}
    btn-secondary
  {% elif variant == 'success' %}
    btn-success
  {% elif variant == 'warning' %}
    btn-warning
  {% elif variant == 'danger' %}
    btn-danger
  {% elif variant == 'info' %}
    btn-info
  {% elif variant == 'neutral' %}
    btn-light
  {% endif %}
  {% if size == 'small' %}
    btn-sm
  {% elif size == 'large' %}
    btn-lg
  {% endif %}
  {% if state == 'disabled' %}
    disabled
  {% endif %}
  {% if full_width %}
    w-100
  {% endif %}
  {% if class %}
    {{ class }}
  {% endif %}
{% endcf_ui_class %}
{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="{{ cf_class }}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}{% cf_ui_render_attrs "button" attrs %}>{% if state == 'loading' %}<span class="spinner-border spinner-border-sm" aria-hidden="true"></span> {% endif %}{{ slot }}</{{ cf_tag }}>{% endwith %}