Conditional tag name

[droganov]

Hello.
I'm working on md-button component. It has a condition — normally it should be rendered as a button element, but if href attribute is provided it should be rendered as an anchor.

How can I optimise the below template and either get rid of conditional statement or avoid atrributes copy/pasting?

View:

<index: element="md-button">
    {{ if @href }}
        <a 
            class="md-button {{ @class }} {{ disabledClass }}"
            href="{{ @href }}"
            role="{{ @role }}"
            tabindex="{{ @tabindex }}"
            target="{{ @target }}"
            title="{{ @title }}"

            on-click="handleClick($ev, $el)"
            on-dblclick="handleDblclick($ev, $el)"

            on-mousedown="handleMousedown($ev, $el)"
            on-mouseup="handleMouseup($ev, $el)"
            on-mouseover="handleMouseover($ev, $el)"
            on-mouseout="handleMouseout($ev, $el)"

            on-focus="handleFocus($ev, $el)"
            on-blur="handleBlur($ev, $el)"
        >
            <span class="md-button__label">{{ @content }}</span>
            <md-ripple />
        </a>
    {{ else }}
        <button 
            class="md-button {{ @class }} {{ disabledClass }}"
            disabled="{{ @disabled }}"
            role="{{ @role }}"
            tabindex="{{ @tabindex }}"
            title="{{ @title }}"
            type="{{ @type }}"

            on-click="handleClick($ev, $el)"
            on-dblclick="handleDblclick($ev, $el)"

            on-mousedown="handleMousedown($ev, $el)"
            on-mouseup="handleMouseup($ev, $el)"
            on-mouseover="handleMouseover($ev, $el)"
            on-mouseout="handleMouseout($ev, $el)"

            on-focus="handleFocus($ev, $el)"
            on-blur="handleBlur($ev, $el)"
        >
            <span class="md-button__label">{{ @content }}</span>
            <md-ripple />
        </button>
    {{ / }}