[QUESTION] How to add the button in custom traits

hi again :) My bad, html button tags need textNode value is not visible remove value and add a textNode instead

.....
        getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnLogin';
            button.appendChild(document.createTextNode('btnText'));
            return button;
        },
.....

Hi, First you need to define the new trait (button) and create it.

editor.TraitManager.addType('buttonLogin', {
        /**
       * Returns the input element
       * @return {HTMLElement}
       */
        events: {
            'click': function() {
                   // trigger when btn is clicked
            },  
        },
        getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnLogin';
            button.value = 'Login';
            return button;
        },
    });

After you define the new trait type you must call it inside you custom block

{
            'name': 'button',
            'label': 'Add',
            'type': 'buttonLogin',
        }

@ploutos27 Thanks for your reply, I tried your code but it shows input box instead of button

and my updated custom traits code is

comps.addType('form-type', {

        model: defaultModel.extend({
            /**
       * Returns the input element
       * @return {HTMLElement}
       */
        events: {
            'click': function() {
                   // trigger when btn is clicked
            },  
        },
        getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnLogin';
            button.value = 'Login';
            return button;
        },
        // Extend default properties
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          // Can be dropped only inside `form` elements
          draggable: '*',
          // Can't drop other elements inside it
          droppable: true,
          // Traits (Settings)
          traits: [{
            type: 'text',
            label: 'Title',
            placeholder: 'checkbox',
            name: 'modell',
            changeProp: 1
          }, {
            // Can make it required for the form
            type: `button`,
            label: 'Add',
            name: 'AddElement',
            changeProp: 1
          },
          {
            'name': 'button',
            'label': 'Add',
            'type': 'buttonLogin',
        }
        ],
        }),

        init() {
          this.listenTo(this, 'change:modell', this.doStuff);
          this.listenTo(this, 'click:AddElement', this.doStuff2);
        },
        doStuff() {
          //do something 
          alert('dostuff ')
        },
        doStuff2() {
          //do something 
          alert('dostuff2')
        },

      }, {
        isComponent: function (el) {
          if (el.tagName == 'INPUT') {
            return {
              type: 'input'
            };
          }
        },
      }),

      // Define the View
      view: defaultType.view,
    });

and my custom blocks is

editor.BlockManager.add('ion-form', {
     id: 'ion-form',
     label: `<svg  width="443px" height="70px" viewBox="0 0 150 100" enable-background="new 0 0 128 128"  id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M85.263,46.49L54.485,77.267L42.804,65.584c-0.781-0.782-2.047-0.782-2.828-0.002c-0.781,0.782-0.781,2.048,0,2.829    l14.51,14.513l33.605-33.607c0.781-0.779,0.781-2.046,0-2.827C87.31,45.708,86.044,45.708,85.263,46.49z M64.032,13.871    c-27.642,0-50.129,22.488-50.129,50.126c0.002,27.642,22.49,50.131,50.131,50.131h0.004c27.638,0,50.123-22.489,50.123-50.131    C114.161,36.358,91.674,13.871,64.032,13.871z M64.038,110.128h-0.004c-25.435,0-46.129-20.694-46.131-46.131    c0-25.434,20.693-46.126,46.129-46.126s46.129,20.693,46.129,46.126C110.161,89.434,89.471,110.128,64.038,110.128z"/></g></g>
       <div>ion-form</div>
</svg>`,
     category: 'Forms',
     content: {
       content: `<ion-list class="list list-md">
   <div  style="padding-top:10px; padding-right:10px; padding-left: 10px; padding-bottom: 10px">
     <ion-item class="item item-block item-md item-input">
       <div class="item-inner">
         <div class="input-wrapper">
           <ion-label class="label label-md" id="lbl-6">Username</ion-label>
           <ion-input type="text" class="input input-md" ng-reflect-type="text">
             <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md"
               type="text" aria-labelledby="lbl-6" autocomplete="off" autocorrect="off" placeholder="" ng-reflect-type="text">
           </ion-input>
         </div>
       </div>
       <div class="button-effect"></div>
     </ion-item>
   </div>
   <div style="padding-top:10px; padding-right:10px; padding-left: 10px; padding-bottom: 10px">
     <ion-item class="item item-block item-md item-input">
       <div class="item-inner">
         <div class="input-wrapper">
           <ion-label class="label label-md" id="lbl-7">Password</ion-label>
           <ion-input type="password" class="input input-md" ng-reflect-type="password">
             <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md"
               type="password" aria-labelledby="lbl-7" autocomplete="off" autocorrect="off" placeholder=""
               ng-reflect-type="password">
           </ion-input>
         </div>
       </div>
       <div class="button-effect"></div>
     </ion-item>
   </div>
 </ion-list>`,
       type: 'form-type',
       // activeOnRender: 1,
       classes: ['formLabel'],
       script: function () {},
       style: {
         'padding-top': '10px',
         'padding-right': '10px',
         'padding-left': '10px',
         'padding-bottom': '10px',
         'background-color': '#ffffff'
       },
       attributes: {
         title: 'My title'
       }
     },
     draggable: true,
     removable: true
   })

can u help me