Button Group

Buttongroup built with slot

Manually created button components. 

<div id="62bed3c4dead4" class="c-buttongroup c-buttongroup__border--primary" js-toggle-container data-uid="62bed3c4dead0">
    <button id="62bed3c4de898" class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__toggle" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="62bed3c4de88d">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Toggle
            </span>
        
    </span>
</button>
    <button id="62bed3c4de929" class="c-button c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="outlined" aria-pressed="false" data-uid="62bed3c4de925">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Outlined
            </span>
        
    </span>
</button>
    <button id="62bed3c4de971" class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="outlined" aria-pressed="false" data-uid="62bed3c4de96d">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed3c4de9f1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed3c4de9ed">
                    close
            </i>
            </span>
        
        
    </span>
</button>
    <button id="62bed3c4dea4e" class="c-button c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bed3c4dea4a">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Primary filled
            </span>
        
    </span>
</button>
    </div>
@buttonGroup(['borderColor' => 'primary', 'toggle' => true])

    @button([
        'color' => 'secondary',
        'text' => 'Toggle',
        'size' => 'md',
        'type' => 'filled',
        'toggle' => true
    ])
    @endbutton

    @button([
        'color' => 'primary',
        'text' => 'Outlined',
        'size' => 'md',
        'type' => 'outlined'
    ])
    @endbutton

    @button([
        'type' =>  'outlined',
        'icon' => 'close'
    ])
    @endbutton

    @button([
        'text' => 'Primary filled',
        'color' => 'primary'
    ])
    @endbutton

@endbuttonGroup

Blade component parameters

Key Default value Type Available values Description
borderColor primary string - Primary or secondary
background primary string - Primary or secondary
slot string - The buttons you want to render in a group
container string - if toggle is set to true the js-toggle-container attribute will be applied, otherwise it's just a div
toggle false boolean - set to true will make it possible to add js-toggle-trigger to the buttons attribute list
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/ButtonGroup/buttonGroup.json