Skip to main content
Version: 1.20.1

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:

AttributeTypeMandatoryDescription
buttonTypeStringNSpecify 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:
disabledBooleanNSet the value to true to disable the button. A disabled button becomes gray and users cannot click it. The default value is false.
isVisibleBooleanNSet the value to false to hide the button. The default value is true.
svgStringNSpecify the SVG code of a pre-decoded image file.
hintStringNAdd a text hint for the button.
classStringNSpecify 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: