Skip to content

Fix button with icons but empty slot rendered as square button - #2821

Open
ghabriel25 wants to merge 1 commit into
livewire:mainfrom
ghabriel25:fix/flux-button
Open

Fix button with icons but empty slot rendered as square button#2821
ghabriel25 wants to merge 1 commit into
livewire:mainfrom
ghabriel25:fix/flux-button

Conversation

@ghabriel25

@ghabriel25 ghabriel25 commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Fix flux button with icons but no slot content rendered as square button

Problem

Buttons with both icon and icon:trailing but no text content were incorrectly rendered as square buttons when Blaze was disabled/enabled.

This happens because an empty/whitespace-only slot is treated as empty by the compiled view, causing $square to default to true. As a result, the button receives the square styling (w-8 for small button) and the two icons lose their expected spacing and overlap.

Solution

Only default the button to square when the slot is empty and the button does not contain both a leading and trailing icon.

This preserves the existing square-button behavior for icon-only buttons while ensuring buttons containing two icons are rendered with the correct spacing, regardless of whether Blaze is enabled.

Before

$square ??= $slot->isEmpty();

After

$square ??= $slot->isEmpty() && ! ($iconLeading && $iconTrailing);

Setup

<flux:main class="flex gap-6">
    <flux:button wire:click="save" variant="outline" icon="briefcase" icon:trailing="chevron-down"> </flux:button>
    <flux:button wire:click="save" variant="outline" icon="briefcase" icon:trailing="chevron-down" :square="false" />
    <flux:button wire:click="save" variant="outline" icon="briefcase" icon:trailing="chevron-down" />
    <flux:button wire:click="save" variant="outline" icon="briefcase" icon:trailing="chevron-down">Test</flux:button>
    <flux:button.group>
        <flux:button>Save</flux:button>
        <flux:button icon="chevron-down" />
    </flux:button.group>
    <flux:button.group>
        <flux:button icon="pencil-square" />
        <flux:button>Edit</flux:button>
    </flux:button.group>
    <flux:button.group>
        <flux:button icon="magnifying-glass" />
        <flux:button>Options</flux:button>
        <flux:button icon="chevron-down" />
    </flux:button.group>
</flux:main>

Note

Notice that the first button with whitespace slot rendered slightly different when Blaze disabled and enabled. It seems Blaze treat whitespace differently therefore I'll just keep it as it is.

Blaze Off

Before:
image

After:
image

Blaze On

Before:
image

After:
image

Related PR: livewire/blaze#209
Fixes #2816

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button with icon + icon:trailing and no text renders as square when Blaze is enabled

1 participant