PowerButton — Smart UI JavaScript API

PowerButton — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PowerButton - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-power-button id="demo-powerbutton"></smart-power-button>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.powerbutton.js';

    const el = document.getElementById('demo-powerbutton');
    if (el) {

      el.checked = true;
      el.innerHTML = 'Power';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: PowerButton   Framework: JavaScript   Selector: smart-power-button

API counts: 13 properties, 0 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: n/a

Common events: change

Module hint: smart-webcomponents/source/modules/smart.powerbutton.js

PowerButton is On/Off rounded button.

Class

PowerButton

PowerButton

PowerButton is On/Off rounded button.

Selector

smart-power-button

Quick picks

changedisabledvalue

Properties

AanimationSpecifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode.
CcheckedSets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.
CclickModeSpecifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event.
DdisabledControls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.
LlocaleSpecifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.
LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.
MmessagesDefines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.
NnameGets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.
RreadonlyWhen the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.
UunfocusableIf set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.
UunlockKeyGets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.
VvalueRetrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.

Events

CchangeThis event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.

Properties

animationSpecifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-power-button animation="none"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-power-button');
const animation = el.animation;

checkedSets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.boolean

Sets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.

Default value

false

Examples

Markup and runtime examples for checked:

HTML attribute:

<smart-power-button checked></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.checked = false;

Read the current value:

const el = document.querySelector('smart-power-button');
const checked = el.checked;

clickModeSpecifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event."hover" | "press" | "release" | "pressAndRelease"

Specifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event.

Default value

"release"

Examples

Markup and runtime examples for clickMode:

HTML:

<smart-power-button click-mode="hover"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.clickMode = "release";

Read the current value:

const el = document.querySelector('smart-power-button');
const clickMode = el.clickMode;

disabledControls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.boolean

Controls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-power-button disabled></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-power-button');
const disabled = el.disabled;

localeSpecifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.string

Specifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-power-button locale="de"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-power-button');
const locale = el.locale;

localizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.function | null

Callback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-power-button localize-format-function="function(){return '...'}"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

const el = document.querySelector('smart-power-button');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.object

Defines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-power-button messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-power-button');
const messages = el.messages;

nameGets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.string

Gets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.

Default value

""""

Examples

Markup and runtime examples for name:

HTML:

<smart-power-button name="Name"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.name = "New Name";

Read the current value:

const el = document.querySelector('smart-power-button');
const name = el.name;

readonlyWhen the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.boolean

When the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-power-button readonly></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-power-button');
const readonly = el.readonly;

themeSpecifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.string

Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-power-button theme="blue"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-power-button');
const theme = el.theme;

unfocusableIf set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.boolean

If set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-power-button unfocusable></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-power-button');
const unfocusable = el.unfocusable;

unlockKeyGets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.string

Gets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-power-button unlock-key=""></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-power-button');
const unlockKey = el.unlockKey;

valueRetrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.string

Retrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.

Default value

""""

Examples

Markup and runtime examples for value:

HTML:

<smart-power-button value="Value"></smart-power-button>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-power-button');
el.value = "New Value";

Read the current value:

const el = document.querySelector('smart-power-button');
const value = el.value;

Events

changeThis event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.CustomEvent

This event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-power-button')?.addEventListener('change', (event) => {
	// event handling code goes here.
})

CSS Variables

--smart-power-button-default-widthvar()

Default value

"var(--smart-editor-height)"

smartPowerButton default width

--smart-power-button-default-heightvar()

Default value

"var(--smart-editor-height)"

smartPowerButton default height