<!-- 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 kx-btngroup--fit-tight" role="group" aria-label="First group">
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-btn--icon" aria-label="Pull Up">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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-large kx-btn--icon" aria-label="Pull Right">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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-large kx-btn--icon" aria-label="Pull Down">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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-large kx-btn--icon" aria-label="Pull Left">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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 kx-btngroup--fit-tight end" role="group" aria-label="Second group">
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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-large">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink: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-large">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt">Search</span>
    </span>
</button>
    </div>
</div>
<!-- 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>
{
  "ariaLabel": null,
  "classes": null
}
  • Content:
    // ==========================================================================
    // Component: button-toolbar
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    // Block (parent)
    // ==========================================================================
    .kx-btntoolbar {
        .kx-btngroup {
            @include mr(mini);
        }
    }
    
    // Modifiers
    // ==========================================================================
    
    
  • URL: /components/raw/button-toolbar/_button-toolbar.scss
  • Filesystem Path: src\components\01-button-toolbar\_button-toolbar.scss
  • Size: 566 Bytes

There are no notes for this item.