ToggleButton CSS Styling

Smart.ToggleButton represents a simple toggle button that has two states: checked and unchecked. The state can be changed by clicking on the element or by setting the checked property to the desired state.

Required files

The Smart.ToggleButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.button.js -- this file defines the functionality of the Smart.ToggleButton custom element.

Smart.PowerButton also requires the following style sheets in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.


To create an instance of the Smart.ToggleButton custom element, insert the following tag in an HTML page:


To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-toggle-button checked></smart-toggle-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-toggle-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.ToggleButton:

  • 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.