RepeatButton — Smart UI JavaScript API

RepeatButton — 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>RepeatButton - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-repeat-button id="demo-repeatbutton">Save</smart-repeat-button>

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

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

      el.innerHTML = 'Hold to increment';
      el.delay = 80;

      el.addEventListener('click', () => console.log('Button clicked'));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: RepeatButton   Framework: JavaScript   Selector: smart-repeat-button

API counts: 15 properties, 0 methods, 1 events

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

Common methods: n/a

Common events: click

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

RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.

Class

RepeatButton

RepeatButton

RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.

Selector

smart-repeat-button

Quick picks

clickdisabledvalue

Properties

AanimationGets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected mode.
CclickModeDefines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions.
DdelaySpecifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.
DdisabledControls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.
IinitialDelaySpecifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.
IinnerHTMLAssigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).
LlocaleSpecifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.
MmessagesDefines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.
NnameRetrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.
RreadonlyWhen the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.
TthemeSpecifies the visual theme to be applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the interface.
UunfocusableIf set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.
UunlockKeySets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.
VvalueSets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.

Events

CclickThis event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.

Properties

animationGets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected mode."none" | "simple" | "advanced"

Gets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected 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-repeat-button animation="none"></smart-repeat-button>

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

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

Read the current value:

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

clickModeDefines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions."hover" | "press" | "release" | "pressAndRelease"

Defines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions.

Default value

"release"

Examples

Markup and runtime examples for clickMode:

HTML:

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

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

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

Read the current value:

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

delaySpecifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.number

Specifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.

Default value

50

Examples

Markup and runtime examples for delay:

HTML:

<smart-repeat-button delay="20"></smart-repeat-button>

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

const el = document.querySelector('smart-repeat-button');
el.delay = 100;

Read the current value:

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

disabledControls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.boolean

Controls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

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

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

Read the current value:

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

initialDelaySpecifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.number

Specifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.

Default value

150

Examples

Markup and runtime examples for initialDelay:

HTML:

<smart-repeat-button initial-delay="50"></smart-repeat-button>

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

const el = document.querySelector('smart-repeat-button');
el.initialDelay = 500;

Read the current value:

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

innerHTMLAssigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).string

Assigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).

Default value

""""

Examples

Markup and runtime examples for innerHTML:

HTML:

<smart-repeat-button inner-h-t-m-l="Repeat Button Label"></smart-repeat-button>

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

const el = document.querySelector('smart-repeat-button');
el.innerHTML = "New Repeat Button Label";

Read the current value:

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

localeSpecifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.string

Specifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.function | null

Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

messagesDefines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.object

Defines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.

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

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

const el = document.querySelector('smart-repeat-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-repeat-button');
const messages = el.messages;

nameRetrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.string

Retrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.

Default value

""""

Examples

Markup and runtime examples for name:

HTML:

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

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

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

Read the current value:

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

readonlyWhen the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.boolean

When the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

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

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

Read the current value:

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

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

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

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

unfocusableIf set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.boolean

If set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

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

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

Read the current value:

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

unlockKeySets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.string

Sets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

valueSets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.string

Sets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.

Default value

""""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

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

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

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

Read the current value:

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

Events

clickThis event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.CustomEvent

This event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.

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

Try a demo showcasing the click event.

Examples

Listen for click 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-repeat-button')?.addEventListener('click', (event) => {
	// event handling code goes here.
})