<a data-ts="Button"> has 100% width

[ehats]

Bug report

I was trying to create an <a> that looks like a TS button. I was suggested to use

<a data-ts="Button" class="ts-tertiary">
    <span>Text</span>
</a>

But that causes the buttons to have 100% width (see screenshot).

A workaround is to create an ordinary button and wrap it in an <a> tag.

Tested on Firefox 53 (Linux)

Tradeshift UI version affected

v7.1.0

Expected Behavior

The buttons will show up as usual

Actual Behavior

The buttons show up with 100% width and their edges in the wrong place

Screenshots (optional)

[sampi]

have you tried putting the fake 'button' inside a Buttons container? http://ui.tradeshift.com/#components/buttons/buttons.html something like:

<menu data-ts="Buttons">
    <li>
        <a data-ts="Button" class="ts-button">
            <span>Button One</span>
        </a>
    </li>
    <li>
        <a data-ts="Button" class="ts-button">
            <span>Button Two</span>
        </a>
    </li>
</menu>

[sampi]

in any case, we'll look into it, but this is a lower priority, because buttons should be buttons and links should be links, but in theory we shouldn't care about the tag being used.

[ehats]

@sampi I tried the container. The buttons' edges are now in the right place, but the button is still 100% wide.