Custom component is not working after saving.

You should add some type to your component and then parse it in isComponent
For example the similar button link
const components = editor.DomComponents;
  const link = components.getType('link');

components.addType('custom-link-button', {
    model: link.model.extend({
      defaults: Object.assign({}, link.model.prototype.defaults, {
        attributes: { 'link-extended': 'custom-link-button },
      }),
    }, {
      isComponent: (el) => {
        let result;

        if (el.tagName == 'A' && el.attributes['link-extended'] 
          && el.attributes['link-extended'].value === 'custom-link-button') {
          result = {
            type: 'custom-link-button',
            editable: 0
          };

          // The link is editable only if, at least, one of its
          // children is a text node (not empty one)
          const children = el.childNodes;
          const len = children.length;
          if (!len) delete result.editable;

          for (let i = 0; i < len; i++) {
            const child = children[i];

            if (child.nodeType == 3 && child.textContent.trim() != '') {
              delete result.editable;
              break;
            }
          }
        }
        
        return result;
      }
    }),
    view: link.view
  });