Button: Icon: Hidden text 

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-base kx-btn--icon" aria-label="This text is visually hidden, but still accessible through screen readers">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#search"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">This text is visually hidden, but still accessible through screen readers</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": "This text is visually hidden, but still accessible through screen readers",
  "classes": null,
  "state": null,
  "icon": {
    "symbol": "search",
    "size": "base"
  },
  "iconAfter": null,
  "hideText": true,
  "disabled": null,
  "active": null,
  "skin": "primary",
  "size": "base",
  "data": null,
  "ariaLabelledBy": null
}

Buttons

Please see the guidelines for Buttons for more info.