Button Group

Buttongroup built with slot

Manually created button components. 

<div id="61efb2029ce39" class="c-buttongroup c-buttongroup__border--primary" js-toggle-container data-uid="61efb2029ce33">
    <button id="61efb2029caad4.80213042" class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__toggle ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efb2029cad0">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Toggle
            </span>
        
                    
            
    </span>
</button>
    <button id="61efb2029cb5d6.49515979" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="outlined" aria-pressed="false" data-uid="61efb2029cb6e">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Outlined
            </span>
        
                    
            
    </span>
</button>
    <button id="61efb2029cbd05.56838062" class="c-button c-button__filled c-button__filled--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="outlined" aria-pressed="false" data-uid="61efb2029cbe0">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb2029cca1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb2029cc9b">
                    close
            </i>
        
                    
            
    </span>
</button>
    <button id="61efb2029cd339.43974194" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb2029cd46">   
    <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