Button Width is not correct when using icons only

[alexanderkroneis]

Hi! 👋

We tried to use flux:button by using icon and icon-trailing only and saw that the button width is not correctly.

<flux:button size="sm">
    <x-slot:icon>
        <flux:icon.swatch variant="solid" class="size-4"/>
    </x-slot:icon>

    <x-slot:icon-trailing>
        <flux:icon.chevron-down variant="solid" class="size-4"/>
    </x-slot:icon-trailing>
</flux:button>

[jeffchown]

@alexanderkroneis When you pass either the icon or icon-trailing attribute to a flux:button, and no other content (e.g. $slot is empty), the flux:button sets itself to square.

So, when you pass both via x-slot, I believe that the flux:icon doesn't account for two icons and still sets itself to square.

If you don't use x-slot and instead:

<flux:button size="sm">
    <flux:icon.swatch variant="solid" class="size-4"/>

    <flux:icon.chevron-down variant="solid" class="size-4"/>
</flux:button>

Your button should size correctly to the width of your button's content (in this case 2 icons)

[alexanderkroneis]

That honestly makes so much sense. 😂 It's working fine, thanks.

[jeffchown]

You're welcome @alexanderkroneis