Button Group: Spacing 

<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--spacing  " role="group" aria-label="Buttons with spacing">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Cancel</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">Save changes</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": "Buttons with spacing",
  "buttons": [
    {
      "context": {
        "text": "Cancel",
        "skin": "secondary",
        "size": "base"
      }
    },
    {
      "context": {
        "text": "Save changes",
        "skin": "primary",
        "size": "base"
      }
    }
  ],
  "classes": null,
  "spacing": "kx-btngroup--spacing"
}

There are no notes for this item.