{# Django template for Tag #}
{% load components %}

<span
  {% if id %}id="{{ id }}"{% endif %}
  class=
  "
  usa-tag usx-tag
  {% if big %}usa-tag--big{% endif %}
  {% if color and not outline %}bg-{{ color }}{% endif %}
  {% if color and outline %}text-{{ color }}{% endif %}
  {% if outline %}usx-tag--outline{% endif %}
  {{ className }}
  "
>
  {% if big %}
    {% with iconSize=3 %}
      {% if icon %}{% icon name=icon size=iconSize %}{% endicon %}{% endif %}{{ children | default:value }}
    {% endwith %}
  {% else %}
    {% with iconSize=2 %}
      {% if icon %}{% icon name=icon size=iconSize %}{% endicon %}{% endif %}{{ children | default:value }}
    {% endwith %}
  {% endif %}
  {% if dismissible %}
    <button
      type="button"
      class="usx-tag__dismiss"
      aria-label="Dismiss tag"
      {% if onDismiss %}
      onclick="{{ onDismiss }}"
      {% else %}
      onclick="this.closest('.usx-tag').remove();"
      {% endif %}
    >
      {% icon name="close" size="2" %}{% endicon %}
    </button>
  {% endif %}
</span>