{% load cf_ui %}
{% cf_ui_class as cf_class %}
  ui button
  {% if variant == 'primary' %}
    primary
  {% elif variant == 'secondary' %}
    secondary
  {% elif variant == 'success' %}
    positive
  {% elif variant == 'warning' %}
    yellow
  {% elif variant == 'danger' %}
    negative
  {% elif variant == 'info' %}
    teal
  {% endif %}
  {% if size == 'small' %}
    small
  {% elif size == 'large' %}
    large
  {% endif %}
  {% if state == 'loading' %}
    loading
  {% elif state == 'disabled' %}
    disabled
  {% endif %}
  {% if full_width %}
    fluid
  {% 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 %}>{{ slot }}</{{ cf_tag }}>{% endwith %}