You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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

  • 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);
        }
    }
} 
  • No labels