Button Group: Mixed buttons 

<!-- 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>
    <div class="kx-dropdown" role="group">
        <button id="--91936" class="kx-dropdown__toggle kx-btn kx-btn--skin-primary kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            <span class="kx-btn__txt">Dropdown</span>
            <i class="kx-icon kx-icon--size-small kx-dropdown__caret">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
        </svg>
    </i>
        </span>
    </button>
        <div class="kx-dropdown__menu kx-js-dropdown__menu" aria-labelledby="--91936">
            <ul class="kx-dropdown__list">
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Support</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Give feedback</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Community</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Privacy policy</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">About Kognifai</span>
                            </a>
                </li>
            </ul>
        </div>
    </div>

</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": "Dropdown",
        "skin": "primary",
        "size": "base",
        "items": [
          {
            "text": "Support",
            "href": "#"
          },
          {
            "text": "Give feedback",
            "href": "#"
          },
          {
            "text": "Community",
            "href": "#"
          },
          {
            "text": "Privacy policy",
            "href": "#"
          },
          {
            "text": "About Kognifai",
            "href": "#"
          }
        ],
        "caret": true
      }
    }
  ],
  "classes": null,
  "spacing": null
}

There are no notes for this item.