var component =
    {
        extends: BaseDataComponent,
        mixins: [ActionsHandlerMixin, TooltipMixin, VisibilityMixin],
        template: '#template-name#',
        props: [
            'data',
            'classes',
            'type',
            'text',
            'icon',
            'title',
            'size',
            'displayTitle'
        ],
        data: function () {
            return {
                displayTitle_: false,
                data_: null,
                icon_: '',
                type_: '',
                size_: '',
                title_: ''
            };
        },

        computed: {
            typeClass: function () {
                return this.type_ ? 'lu-btn--' + this.type_ : '';
            },
            sizeClass: function () {
                return this.size_ ? 'lu-btn--' + this.size_ : '';
            },
            iconAlignClass: function () {
                return !this.displayTitle_ ? 'lu-btn--icon' : '';
            }
        }
    }