button

Use the <button> tag to add a button to your widget form. The behavior is similar to React's.

By default, no event is connected to the button. Use event-click attribute to add an event when a user clicks the button.

Available attributes:

Attribute	Type	Mandatory	Description
buttonType	String	N	Specify button display style for forms and lists. primary – a blue color button: approve – a green color button: destructive – a red color button: secondary – a transparent background for the button with no borders: Use the following button types along with the svg attribute and without a text title: icon – a square button, 32x32 pixels: icon-mini – a square button that looks the same as icon but smaller – 20x20 pixels: icon-primary – a square button with blue background, 32x32 pixels: icon-border – a square button with borders, 32x32 pixels: Use the following button types along with the svg attribute and a text title: expand – a rectangular button with light blue background: If you do not specify the buttonType or set the value that is not included in the list above, the default button type is used – a button with transparent background and black borders:
disabled	Boolean	N	Set the value to true to disable the button. A disabled button becomes gray and users cannot click it. The default value is false.
isVisible	Boolean	N	Set the value to false to hide the button. The default value is true.
svg	String	N	Specify the SVG code of a pre-decoded image file.
hint	String	N	Add a text hint for the button.
class	String	N	Specify the CSS class name that is defined in the CSS field of the widget.

Example:

Button

<button buttonType="icon" hint="Add" svg='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z" fill="#2E3238"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="#2E3238"/>
</svg>' </button>

The template above adds a button with a hint that appears when the user moves the pointer over it:

Page tree

button