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. |