button

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

Available attributes:

Attribute	Type	Mandatory	Description
buttonType	String	N	Specify button displaying style for forms and lists. 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 icon-mini – is a small button that provides extra information when moving the pointer over it or clicking it. See the example below: The disabled buttons appear in gray.

To set a button, follow the example below:

Button

<button buttonType="approve" event-click="window.s_widget_custom.approve();">
  {data.approveBtnTitle}
</button>

<button buttonType="destructive" event-click="window.s_widget_custom.reject();">
  {data.rejectBtnTitle}
</button>

See below all the icon-mini editing capabilities:

icon-mini

<button buttonType="icon-mini"

.IconMini {
    @include btnIconCommonStyles;
    width: 20px;
    height: 20px;

    border: 1px solid $colorNeutral000;
    background-color: $colorNeutral000;
    @include svgIcon(16px, 16px, $colorNeutral800);

    &:hover {
        background-color: $colorNeutral070;
        border-color: $colorNeutral070;
    }

    &:active {
        background-color: $colorBlue010;
        border-color: $colorBlue010;
    }

    &[readonly],
    &[disabled] {
        cursor: default;
        &,
        &:focus,
        &:hover,
        &:active {
            background-color: transparent;
            @include svgIconColor($colorNeutral090);
        }
    }
}

Page tree

button