Button Toolbar

HTML

<!-- BUTTON-TOOLBAR Component -->
<div class="kx-btntoolbar kx-flex kx-flex-wrap" role="toolbar" aria-label="A toolbar with button groups">
    <!-- BUTTON-GROUP Component -->
    <div class="kx-btngroup kx-flex kx-flex-wrap  " role="group" aria-label="First group">
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base kx-btn--icon" aria-label="Pull Up">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#pull-up"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">Pull Up</span>
    </span>
</button>
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base kx-btn--icon" aria-label="Pull Right">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#pull-right"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">Pull Right</span>
    </span>
</button>
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base kx-btn--icon" aria-label="Pull Down">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#pull-down"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">Pull Down</span>
    </span>
</button>
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base kx-btn--icon" aria-label="Pull Left">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#pull-left"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">Pull Left</span>
    </span>
</button>
    </div>
    <!-- BUTTON-GROUP Component -->
    <div class="kx-btngroup kx-flex kx-flex-wrap  end " role="group" aria-label="Second group">
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#pin"></use>
        </svg>
    </i>
        <span class="kx-btn__txt">Pin to dashboard</span>
    </span>
</button>
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#attachment"></use>
        </svg>
    </i>
        <span class="kx-btn__txt">Attach File</span>
    </span>
</button>
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#search"></use>
        </svg>
    </i>
        <span class="kx-btn__txt">Search</span>
    </span>
</button>
    </div>
</div>

View

<!-- BUTTON-TOOLBAR Component -->
<div class="kx-btntoolbar kx-flex kx-flex-wrap{% for class in classes %} {{ class }}{% endfor %}" role="toolbar" aria-label="{{ ariaLabel }}">
    {% for group in groups -%}
    {% render '@button-group', group.context %}
    {% endfor -%}
</div>