Toggle Button Group Stable New in 3.2 Dark theme

Toggle Buttons display the status „active“ or "not-active“ through their design. Functionally they are very similar to Radio Buttons which means only one button can be active at the same time.

Usage Code

<uimc-togglebutton-group>
    <uimc-togglebutton>
       Label 1
    </uimc-togglebutton>
    <uimc-togglebutton>
       Label 2
    </uimc-togglebutton>
</uimc-togglebutton-group>

Toggle Button container `<uimc-togglebutton-group>`

Attribute	Description	Values	Default
flow	Set the flow of the buttons	`row`, `column`, `breakpoint`	`row`
breakpoint	If flow is set to `breakpoint` it turns horizontal above the given breakpoint	`xs`, `sm`, `md`, `lg`, `xl`	`md`
theme	Control item’s background	`light`, `dark`	`light`

Callback	Argument	Description
onChange	current togglebutton	Callback function that gets triggered when a togglebutton inside the group is clicked

Slot	Slotted content
default	Slot for some `<uimc-togglebutton>`

Toggle Buttons `<uimc-togglebutton>`

Attribute	Description	Values	Default
selected	Select-state of the Toggle Button	–	–
disabled	Active-state of the item	–	–

Callback	Argument	Description
onChange	Object	Callback function that gets triggered when the togglebutton is clicked

Slot	Slotted content
default	Inner text is shown as label

Toggle Button Group text only

Label 1

Label 2

<uimc-togglebutton-group flow= "row">
    <uimc-togglebutton selected>
       Label 1
    </uimc-togglebutton>
    <uimc-togglebutton>
       Label 2
    </uimc-togglebutton>
</uimc-togglebutton-group>

Toggle Button Group icons only

<uimc-togglebutton-group flow= "row">
    <uimc-togglebutton selected>
       <i class="icon-layout-2x2"></i>
    </uimc-togglebutton>
    <uimc-togglebutton>
       <i class="icon-layout-3x2"></i>
    </uimc-togglebutton>
    <uimc-togglebutton>
       <i class="icon-layout-3x3"></i>
    </uimc-togglebutton>
    <uimc-togglebutton>
       <i class="icon-layout-list"></i>
    </uimc-togglebutton>
</uimc-togglebutton-group>

Toggle Button Group Icons text combination

Play

Pause

Stop

<uimc-togglebutton-group flow= "row">
    <uimc-togglebutton selected>
       <i class="icon-play"></i>Play
    </uimc-togglebutton>
    <uimc-togglebutton>
       <i class="icon-pause"></i>Pause
    </uimc-togglebutton>
    <uimc-togglebutton>
       <i class="icon-video-stop"></i>Stop
    </uimc-togglebutton>
</uimc-togglebutton-group>

Dark theme