Toggle Button CSS API Reference

All Common CSS variables:

    Specific CSS variables for Toggle Button styling:

    • --smart-button-text-transform: Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize.
    • --smart-button-padding: Sets button's paddings.
    • --smart-button-large-padding: Sets large button's paddings.
    • --smart-button-large-font-size: Sets large button's font size.
    • --smart-button-small-padding: Sets small button's paddings.
    • --smart-button-small-font-size: Sets small button's font size.
    • --smart-button-very-small-padding: Sets very small button's paddings.
    • --smart-button-very-small-font-size: Sets very small button's font size.

    Button - Flat

    • --smart-button-flat-color: The color of the flat button.

    Button - Outlined

    • --smart-button-outlined-color: The color of the outlined button.
    • --smart-button-outlined-border: The border of the outlined button.

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

    • smart-toggle-button - the element itself. Can be used to set width and height for the whole element.
      • .smart-button - an HTML Button element that contains almost all of the CSS work for the element. Can be used to apply borders, paddings, background, font, color, etc. It also contains tabindex and it's active and focused states are used to change the appearance of the element.


                    --smart-color: #ccc;
                    --smart-font-size: 20px;