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`

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	–	–
theme	Control item’s background	`light`, `dark`	`light`

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

Slot	Slotted content
default	Inner text is shown as label

Toggle Button Group Stable New in 3.2 Dark theme

Toggle Button container <uimc-togglebutton-group>

Toggle Buttons <uimc-togglebutton>

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

Toggle Buttons `<uimc-togglebutton>`