Button JAVASCRIPT UI Component API

Button Javascript API

Class

Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

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

Default value

"advanced"

Example

Set the animation property.

 <smart-button animation='none'></smart-button>

Set the animation property by using the HTML Element's instance.

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

 button.animation = 'simple';

Get the animation property.

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

 let animation = button.animation;

clickMode"hover" | "press" | "release" | "pressAndRelease"

Determines the click mode for the element.

Allowed Values

"hover" - The element fires a click event when hovered.
"press" - The element fires a click event when pressed.
"release" - The element fires a click event when released.
"pressAndRelease" - The element fires a click event when pressed and again when released.

Default value

"release"

Example

Set the clickMode property.

 <smart-button click-mode='hover'></smart-button>

Set the clickMode property by using the HTML Element's instance.

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

 button.clickMode = 'release';

Get the clickMode property.

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

 let clickMode = button.clickMode;

contentany

Sets the content of the element.

Default value

Example

Set the content property.

 <smart-button content='Button Label'></smart-button>

Set the content property by using the HTML Element's instance.

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

 button.content = New Button Label;

Get the content property.

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

 let content = button.content;

disabledboolean

Enables or disables the button.

Default value

false

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

 button.disabled = false;

Get the disabled property.

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

 let disabled = button.disabled;

innerHTMLstring

Sets the inner HTML of the element.

Default value

""""

Try a demo showcasing the innerHTML property.

Example

Set the innerHTML property.

 <smart-button inner-h-t-m-l='Button Label'></smart-button>

Set the innerHTML property by using the HTML Element's instance.

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

 button.innerHTML = 'New Button Label';

Get the innerHTML property.

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

 let innerHTML = button.innerHTML;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-button locale='de'></smart-button>

Set the locale property by using the HTML Element's instance.

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

 button.locale = 'fr';

Get the locale property.

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

 let locale = button.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

 <smart-button localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-button>

Set the localizeFormatFunction property by using the HTML Element's instance.

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

 button.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = button.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

}

Example

Set the messages property.

 <smart-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-button>

Set the messages property by using the HTML Element's instance.

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

 button.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."}};

Get the messages property.

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

 let messages = button.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""""

Example

Set the name property.

 <smart-button name='Name'></smart-button>

Set the name property by using the HTML Element's instance.

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

 button.name = 'New Name';

Get the name property.

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

 let name = button.name;

readonlyboolean

If the custom element is readonly, it cannot be interacted with.

Default value

false

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

 button.readonly = false;

Get the readonly property.

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

 let readonly = button.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-button right-to-left></smart-button>

Set the rightToLeft property by using the HTML Element's instance.

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

 button.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = button.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-button theme='blue'></smart-button>

Set the theme property by using the HTML Element's instance.

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

 button.theme = 'red';

Get the theme property.

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

 let theme = button.theme;

typestring

Sets or gets the type of the button.

Default value

"Reset"

Example

Set the type property.

 <smart-button type='submit'></smart-button>

Set the type property by using the HTML Element's instance.

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

 button.type = 'reset';

Get the type property.

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

 let type = button.type;

valuestring

Sets or gets the button's value.

Default value

Example

Set the value property.

 <smart-button value='Value'></smart-button>

Set the value property by using the HTML Element's instance.

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

 button.value = 'New value';

Get the value property.

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

 let value = button.value;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

 button.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = button.unfocusable;

Events

clickCustomEvent

Click event is triggered regarding to the chosen clickMode.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onClick

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.

Example

Set up the event handler of click event.

const button = document.querySelector('smart-button');
button.addEventListener('click', function (event) {
	// event handling code goes here.
})

CSS Variables

--smart-button-text-transformvar()

Default value

"uppercase"

Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize.

--smart-button-paddingvar()

Default value

"8px 16px"

Sets button's paddings.

--smart-button-large-paddingvar()

Default value

"10px 16px"

Sets large button's paddings.

--smart-button-large-font-sizevar()

Default value

"18px"

Sets large button's font size.

--smart-button-small-paddingvar()

Default value

"5px 10px"

Sets small button's paddings.

--smart-button-small-font-sizevar()

Default value

"12px"

Sets small button's font size.

--smart-button-very-small-paddingvar()

Default value

"1px 5px"

Sets very small button's paddings.

--smart-button-very-small-font-sizevar()

Default value

"12px"

Sets very small button's font size.

--smart-button-flat-colorvar()

Default value

"var(--smart-background-color)"

The color of the flat button.

--smart-button-outlined-colorvar()

Default value

"var(--smart-background-color)"

The color of the outlined button.

--smart-button-outlined-bordervar()

Default value

"var(--smart-border)"

The border of the outlined button.