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>