Button

HTML

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Primary Button</span>
    </span>
</button>

View

{%- if href -%}
<!-- LINK AS BUTTON Component -->
<a class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% if disabled %} kx-is-disabled{% endif %}"{% if disabled %} tabindex="-1"{% endif %}{% for data_attr in data %} data-{{ data_attr }}{% endfor %} href="{{ href }}"{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {% render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif -%}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</a>

{%- else -%}
<!-- BUTTON Component -->
<button class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}"{% for data_attr in data %} data-{{ data_attr }}{% endfor %}{{ 'disabled="disabled"' if disabled }}{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {%- render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif %}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</button>
{%- endif -%}