How to use the alloyeditor.Buttons function in alloyeditor

<button title="{AlloyEditor.Strings.link}" tabindex="{this.props.tabIndex}" data-type="button-link" aria-label="{AlloyEditor.Strings.link}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnImageLink.key] = AlloyEditor.EzBtnImageLink = EzBtnImageLink;
eZ.addConfig('ezAlloyEditor.ezBtnImageLink', EzBtnImageLink);

}

        const label = Translator.trans(/*@Desc("Table")*/ 'table_btn.label', {}, 'alloy_editor');
        const css = 'ae-button ez-btn-ae ez-btn-ae--table';

        return (
            <button title="{label}" tabindex="{this.props.tabIndex}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnTable.key] = AlloyEditor.EzBtnTable = EzBtnTable;
eZ.addConfig('ezAlloyEditor.ezBtnTable', EzBtnTable);

EzBtnTable.propTypes = {
    editor: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    tabIndex: PropTypes.number.isRequired,
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import EzEmbedAlign from '../base/ez-embedalign';

export default class EzEmbedAlignCenter extends EzEmbedAlign {
    static get key() {
        return 'ezembedcenter';
    }
}

AlloyEditor.Buttons[EzEmbedAlignCenter.key] = AlloyEditor.EzEmbedAlignCenter = EzEmbedAlignCenter;
eZ.addConfig('ezAlloyEditor.ezEmbedAlignCenter', EzEmbedAlignCenter);

EzEmbedAlignCenter.defaultProps = {
    alignment: 'center',
    iconName: 'image-center',
    cssClassSuffix: 'embed-center',
    label: Translator.trans(/*@Desc("Center")*/ 'embed_align_center_btn.label', {}, 'alloy_editor'),
};

*/
    render() {
        const css = 'ae-button ez-btn-ae ez-btn-ae--heading ' + this.getStateClasses();
        const label = Translator.trans(/*@Desc("Heading")*/ 'heading_btn.label', {}, 'alloy_editor');

        return (
            <button title="{label}" tabindex="{this.props.tabIndex}">
                <svg>
                    
                </svg>
            </button>
        );
    }
}

AlloyEditor.Buttons[EzBtnHeading.key] = AlloyEditor.EzBtnHeading = EzBtnHeading;
eZ.addConfig('ezAlloyEditor.ezBtnHeading', EzBtnHeading);

EzBtnHeading.propTypes = {
    command: PropTypes.string,
    modifiesSelection: PropTypes.bool,
};

EzBtnHeading.defaultProps = {
    command: 'eZAddContent',
    modifiesSelection: true,
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AlloyEditor from 'alloyeditor';
import EzEmbedAlign from '../base/ez-embedalign';

export default class EzEmbedAlignRight extends EzEmbedAlign {
    static get key() {
        return 'ezembedright';
    }
}

AlloyEditor.Buttons[EzEmbedAlignRight.key] = AlloyEditor.EzEmbedAlignRight = EzEmbedAlignRight;
eZ.addConfig('ezAlloyEditor.ezEmbedAlignRight', EzEmbedAlignRight);

EzEmbedAlignRight.defaultProps = {
    alignment: 'right',
    iconName: 'image-right',
    cssClassSuffix: 'embed-right',
    label: Translator.trans(/*@Desc("Right")*/ 'embed_align_right_btn.label', {}, 'alloy_editor'),
};

aria-owns={buttonCommandsListId}
                    className="ae-button ez-btn-ae"
                    onClick={this.props.toggleDropdown}
                    tabIndex={this.props.tabIndex}
                    title={AlloyEditor.Strings.cell}>
                    <svg>
                        
                    </svg>
                
                {buttonCommandsList}
            
        );
    }
}

AlloyEditor.Buttons[EzBtnTableCell.key] = AlloyEditor.EzBtnTableCell = EzBtnTableCell;
eZ.addConfig('ezAlloyEditor.ezBtnTableCell', EzBtnTableCell);