Badges are used for showing a small amount of information, like a category or number, which deserves attention.

<div class="azalea-badge inline-flex items-center text-center font-medium text-black bg-transparent border border-black sm:azalea-text-sm md:azalea-text-md py-1.5 px-3 rounded-full">
    <div class="fill-current w-5 h-5 md:w-6 md:h-6 mx-2 h-3 w-3" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <line x1="15" y1="8" x2="15.01" y2="8"></line>
            <rect x="4" y="4" width="16" height="16" rx="3"></rect>
            <path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
            <path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
        </svg></div>

    Artwork
</div>
{% apply spaceless %}
  {# TODO: make "dismissible"? #}
  {% set classes = [
    'azalea-badge',
    'inline-flex items-center',
    'text-center',
    'font-medium text-black',
    'bg-transparent',
    'border border-black'
  ] %}
  {#
  Prop: status
  Show a status indicator
  #}
  {% set showStatus = 0 %}
  {% if status is defined %}
    {% set showStatus = 1 %}
    {% set status = status ? 1 : 0 %}
  {% endif %}
  {#
    Prop: size
    The component sizes.
    @values 'large', 'medium', small
  #}
  {% if size == 'large' %}
    {% set classes = classes|merge(['sm:azalea-text-md', 'md:azalea-text-lg', 'py-2']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-4', 'pr-7']) %}
    {% else %}
      {% set classes = classes|merge(['px-4']) %}
    {% endif %}
  {% elseif size == 'small' %}
    {% set classes = classes|merge(['sm:azalea-text-xs', 'md:azalea-text-sm', 'py-1']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-2', 'pr-3']) %}
    {% else %}
      {% set classes = classes|merge(['px-2']) %}
    {% endif %}
  {% elseif size == 'xsmall' %}
    {% set classes = classes|merge(['azalea-text-xs', 'py-0.5']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-1.5', 'pr-2.5']) %}
    {% else %}
      {% set classes = classes|merge(['px-1.5']) %}
    {% endif %}
  {% else %}
    {% set classes = classes|merge(['sm:azalea-text-sm', 'md:azalea-text-md', 'py-1.5']) %}
    {% if showStatus %}
      {% set classes = classes|merge(['pl-3', 'pr-5']) %}
    {% else %}
      {% set classes = classes|merge(['px-3']) %}
    {% endif %}
  {% endif %}
  {#
  Prop: round
  The component rounded cornders.
  @values true, false
  #}
  {% if round %}
    {% set classes = classes|merge(['rounded-full']) %}
  {% else %}
    {% set classes = classes|merge(['rounded-sm']) %}
  {% endif %}
  <div class="{{ classes|join(' ') }}">
    {% if showStatus or icon %}
      {% set colorClass = status ? 'text-success' : 'text-error' %}
      {% set iconClasses = [] %}
      {% if size == 'large' %}
        {% set iconClasses = iconClasses|merge(['mx-2.5', 'h-4', 'w-4']) %}
      {% elseif size == 'small' %}
        {% set iconClasses = iconClasses|merge(['mx-1.5', 'h-2', 'w-2']) %}
      {% elseif size == 'xsmall' %}
        {% set iconClasses = iconClasses|merge(['mx-1.5', 'h-1.5', 'w-1.5']) %}
      {% else %}
        {% set iconClasses = iconClasses|merge(['mx-2', 'h-3', 'w-3']) %}
      {% endif %}
      {% if showStatus %}
        <svg fill="currentColor" class="{{ iconClasses|join(' ') }} {{ colorClass }}" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" /></svg>
      {% endif %}
      {% if icon %}
        {% include "@components/icon/icon.twig" with { icon: icon, size: size, extraClasses: iconClasses } %}
      {% endif %}
    {% endif %}
    {# Prop: text #}
    {{ text }}
    {% block content %}{% endblock content %}
  </div>
{% endapply %}