<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-neutral kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Neutral Button</span>
    </span>
</button>
{%- 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 -%}
{
  "href": null,
  "text": "Neutral Button",
  "classes": null,
  "state": null,
  "icon": null,
  "iconAfter": null,
  "hideText": null,
  "disabled": null,
  "active": null,
  "skin": "neutral",
  "size": "base",
  "data": null,
  "ariaLabelledBy": null
}

Buttons

Please see the guidelines for Buttons for more info.