Button Group

HTML

<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="Aria label example">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">First</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Second</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Third</span>
    </span>
</button>
</div>

View

<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap {% if stretch -%} {{ stretch }} {% endif -%} {% if spacing -%} {{ spacing }} {% endif -%} {% for class in align %} {{ class }}{% endfor %} {% for class in classes %} {{ class }}{% endfor %}" role="group" aria-label="{{ ariaLabel }}">
    {%- for button in buttons -%}
        {% if button.context.items -%}
        {% render '@dropdown', button.context %}
        {% else -%}
        {% render '@button', button.context %}
        {% endif -%}
    {% endfor -%}
</div>