Filament•2mo ago

Blank label and icon only on Action Button

When you have a regular action button with an icon only, and ->label('') you still get a <span class="fi-btn-label"> </span> , which means the button gets slightly elongated with the icon off centre. Anyone got a way to avoid that ?:

Solution:

Annoying brain won't me ignore it. Potential solution, haven't checked it doesn't break other things yet, so at your own risk: ```.f-download-icon-button { span.fi-btn-label {...

Jump to solution

9 Replies

Jamie Cee•2mo ago

Are you using ->iconButton() So you wont need to use the label()

MatthewOP•2mo ago

Thanks for the suggestion, that gives a slightly different styling of the button:

MatthewOP•2mo ago

Can't see any methods in the docs to make it look the same as the adjacent button above (sans label), Is there anything I'm missing ?

toeknee•2mo ago

->button() usually

MatthewOP•2mo ago

@toeknee using ->button() gets back to the original issue though. I want an ->iconButton to avoid the blank label issue as detailed in OP, but with the styling of ->button I suspect it might be all sorts of ->extraAttributes , in which case I'll file it under 'can't be bothered'. But be interested to hear of an easy method I may have overlooked

toeknee•2mo ago

Even when using iconButton with button() ? Button usually is a wrapper around the span

MatthewOP•2mo ago

Yes, they appear to overwite each other, depending on which method you chain first.

toeknee•2mo ago

ahh ok

Solution

Matthew•2mo ago

Annoying brain won't me ignore it. Potential solution, haven't checked it doesn't break other things yet, so at your own risk:

.f-download-icon-button {
        span.fi-btn-label  {
            @apply hidden;
        }

    }

.f-download-icon-button {
        span.fi-btn-label  {
            @apply hidden;
        }

    }

->extraAttributes(['class' => 'f-download-icon-button'])

Gaming

Programming

Blank label and icon only on Action Button