Skip to main content
Docs
Components
Foundation
1.0.0Next5.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 1.0.0

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>