Button with href AND inset renders as full width

[giacomovernoni]

This is similar to a previous issue, see:
Button gets full width with href
and
Ensure button and link button display the same

The issue can be temporarily solved by adding class="inline-flex" to the button with href and inset.

<div class="mt-12">
    <p class="mb-3">
        Some text
    </p>
    <flux:button variant="ghost" inset>Button with inset</flux:button>
</div>

<div class="mt-12">
    <p class="mb-3">
        Some text
    </p>
    <flux:button variant="ghost" inset href="#">Button with inset and href</flux:button>
</div>

[jeffchown]

@giacomovernoni Have you tried wrapping your flux:button in a div?

[jeffchown]

@giacomovernoni Ignore my previous post - I can reproduce the issue and can confirm it still exists.
@joshhanley Any ideas?

[joshhanley]

@giacomovernoni thanks for reporting!

So interestingly the problem is the same as what I fixed in PR #35 in that a button is an inline-block by default where as a link is a block by default.

The fix in that PR was to make sure we were using inline-flex instead of flex to make links handle the same way as buttons.

The reason it is breaking now is because of the inset.

Inside the button component button/index.blade.php there is the following line:

->add($inset ? 'flex' : 'inline-flex') // inline-flex is weird with negative margins...

So this means that using inset on a link button is causing it to be flex instead of inline-flex.

@calebporzio have you got any insight into what weirdness inline-flex caused with negative margins?

Volt component for easy reproduction:

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
};
?>

<div class="mt-4 space-y-4">
    <flux:button variant="ghost" inset>Button with inset</flux:button>
    <flux:button variant="ghost" inset href="#">Button with inset and href</flux:button>
</div>

[joshhanley]

We've merged a fix for this in PR #878 which just makes sure that inset is also using the inline-flex. We can't work out what issues it was causing with negative margins, so if anyone comes across this, please feel free to open an issue if you discover any problems with negative margins.