Badge

HTML

<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill kx-badge--skin-primary kx-inline-flex kx-align-items-center">
    <span class="kx-badge__txt">Primary</span>
</span>
</span>

View

<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill{% if skin %} kx-badge--skin-{{ skin }}{% endif %} kx-inline-flex kx-align-items-center">
    {% if icon.symbol -%}
        {% render '@icon', icon, true %}
        <span class="kx-badge__txt{% if hideTxt %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else -%}
        <span class="kx-badge__txt">{{ text }}</span>
    {% endif -%}
    </span>
</span>