Switch Button - CSS API Reference

All Common CSS variables:

Specific CSS variables for Switch Button styling:

• --smart-switch-button-default-width: Default width of the SwitchButton.
• --smart-switch-button-default-height: Default height of the SwitchButton.
• --smart-switch-button-thumb-size: Default thumb size of the SwitchButton (width=height).

The following CSS selectors can be used to style Switch Button:

• smart-switch-button - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
    • `.smart-inner-container' - a container that holds the thumb and content of the element.
      • .smart-false-content-container - a container for the 'false' content.
      • .smart-thumb - the thumb between the two content containers.
      • .smart-true-content-container - a container for the 'true' content.

Demo

<style>
        #switchbutton{
                --smart-switch-button-default-width:50px;
                --smart-switch-button-default-height:30px;
        }
</style>