The <button> tag adds a button to your widget form. This element behavior is similar to React's. 

Available attributes:

AttributeTypeMandatoryDescription
buttonTypeStringN

Specify button displaying style for forms and lists. 

The disabled buttons appear in gray. 

  • unstyled – a white color button
  • primary – a blue color button
  • approve – a green color button
  • destructive – a red color button

  • secondary – a transparent background for the button

Use the following button types along with the svg attribute:

  • icon-mini – a small square button

  • icon – a square button

  • icon-primary – a square button with blue background
  • icon-border – a square button with borders
disabledBooleanN

To disable the button, set the value to true. The default value is false.

isVisible

BooleanNTo disable the tag display, set the value to false. The default value is true.
svgStringNSpecify the SVG code of a pre-decoded image file.
hintStringNSpecify the button text hint.
classStringNSpecify the CSS class name that is defined in the CSS field of the widget.

To set a button, follow the example below:

<checkbox model="data.userCanReject" event-change="window.s_widget_custom.canCheckboxHandler();"></checkbox>
  
<button buttonType="destructive" disabled={data.userCanReject} event-click="window.s_widget_custom.reject();">
  {data.rejectBtnTitle}
</button>