Filament•3w 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•3w ago

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

Matthew•3w ago

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

Matthew•3w 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•3w ago

->button() usually

Matthew•3w 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•3w ago

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

Matthew•3w ago

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

toeknee•3w ago

ahh ok

Solution

Matthew•3w 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