Cómo añadir el botón en rasgos personalizados

Hola, Primero tienes que definir el nuevo rasgo (botón) y crearlo.

editor. TraitManager.addType('buttonLogin', {
        /**
       * Devuelve el elemento de entrada
       * @return {HTMLElement}
       */
        eventos: {
            'click': función() {
                   Activación cuando se pulsa BTN
            },  
        },
        getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnLogin';
            button.value = 'Inicio de sesión';
            botón de retorno;
        },
    });

Después de definir el nuevo tipo de rasgo, debes llamarlo dentro de tu bloque personalizado

{
            'nombre': 'botón',
            'etiqueta': 'Añadir',
            'type': 'buttonLogin',
        }

@ploutos27 Gracias por tu respuesta, He probado tu código pero aparece la caja de entrada en vez de botón

! imagen

Y mi código actualizado de rasgos personalizados es

comps.addType('form-type', {

model: defaultModel.extend({
            /**
       * Devuelve el elemento de entrada
       * @return {HTMLElement}
       */
        eventos: {
            'click': función() {
                   Activación cuando se pulsa BTN
            },  
        },
        getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnLogin';
            button.value = 'Inicio de sesión';
            botón de retorno;
        },
        Extender propiedades predeterminadas
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          Solo puede ser eliminado dentro de elementos de 'forma'
          arrastrable: '*',
          No puedes meter otros elementos dentro
          Droppable: Cierto,
          Rasgos (Escenarios)
          rasgos: [{
            Tipo: 'texto',
            etiqueta: 'Título',
            Marcador: 'casilla de verificación',
            Nombre: 'Modell',
            cambioprop: 1
          }, {
            Puede hacerlo obligatorio para el formulario
            tipo: 'botón',
            etiqueta: 'Añadir',
            nombre: 'AddElement',
            cambioprop: 1
          },
          {
            'nombre': 'botón',
            'etiqueta': 'Añadir',
            'type': 'buttonLogin',
        }
        ],
        }),

init() {
          this.listenTo(this, 'change:modell', this.doStuff);
          this.listenTo(this, 'click:AddElement', this.doStuff2);
        },
        doStuff() {
          Haz algo 
          alerta('dostuff')
        },
        doStuff2() {
          Haz algo 
          alerta('dostuff2')
        },

}, {
        isComponent: function (el) {
          if (el.tagName == 'ENTRADA') {
            return {
              Tipo: 'Entrada'
            };
          }
        },
      }),

Definir la vista
      vista: defaultType.view,
    });

y mis bloques personalizados son

editor. BlockManager.add('ion-form', {
      id: 'forma iónica',
      etiqueta: '<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-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.004c27.638,0,0,0,50.123-22.489,50.123-50.131 C114.161,36.358,91.674,13.871,671,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.126C10.161,89.434,89.471,110.128,64.038.110.128"/></g></g>
        <div>Forma iónica</div>
',</svg>
      categoría: 'Formas',
      Contenido: {
        Contenido: '<ion-list class="list list-md">
    <div style="padding-top:10px; addding-right:10px; addding-left: 10px; addding-bottom: 10px">
      <ion-item-class="item-block item-md elemento-entrada">
        <div class="item-inner">
          <div class="input-wrapper">
            <ion-label class="label label-md" id="lbl-6">Nombre de usuario</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; addding-right:10px; addding-left: 10px; addding-bottom: 10px">
      <ion-item-class="item-block item-md elemento-entrada">
        <div class="item-inner">
          <div class="input-wrapper">
            <ion-label class="label label-md" id="lbl-7">Contraseña</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>
        Tipo: 'Tipo-forma',
        activeOnRender: 1,
        clases: ['formLabel'],
        script: función () {},
        estilo: {
          'Tap-Top': '10px',
          'relleno-derecha': '10px',
          'relleno-izquierda': '10px',
          'acolchado-bottom': '10px',
          'color de fondo': '#ffffff'
        },
        atributos: {
          título: 'Mi título'
        }
      },
      Arrastrable: Cierto,
      Desmontable: Verdadero
    })

¿Puedes ayudarme?