Button Group: Default 

<!-- 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>
 
<!-- 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>
 
{
  "stretch": null,
  "align": [],
  "ariaLabel": "Aria label example",
  "buttons": [
    {
      "context": {
        "text": "First",
        "skin": "primary",
        "size": "base"
      }
    },
    {
      "context": {
        "text": "Second",
        "skin": "primary",
        "size": "base"
      }
    },
    {
      "context": {
        "text": "Third",
        "skin": "primary",
        "size": "base"
      }
    }
  ],
  "classes": null,
  "spacing": null
}

There are no notes for this item.