Inconsistent badge background color and padding

[Jaiieq]

Flux version

1.1.4

Livewire version

3.5.19

Tailwind version

3.4.17

What is the problem?

The default badge background color is different when using a Flux badge as compared to using a badge as part of a flux input. The padding is different as well. As per the attached screenshot, the badge next to Vendor is via the badge option within a flux:input (or flux:select in this case). The Quantity badge is via flux:badge

Code snippets

<flux:badge>R</flux:badge>

<flux:input label="test" badge="R" />

How do you expect it to work?

I would expect that the behavior of the badge to be consistent regardless of using the flux:badge or flux:input badge="X"

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@Jaiieq thanks for reporting! The badge next to the input isn't the badge component under the hood. It is different because it has been designed to fit nicely next to an input label when adding something like required.

Can you explain to us why you might be using the label badge on one input and using the standalone badge next to a label on a different input, and what you are trying to achieve?

[Jaiieq]

@joshhanley, thanks for the response. I figured that was the case by looking at the Flux stubs. I decided to ask the question anyway to see if that was on purpose or an oversight.

My use cases are the following:

• I don't want to be locked into having the label above the input. Some forms that I do I prefer the inline look and I am not sure I can do that natively with the Flux input(s)?
• In my current project I have items for an order (see screenshot). I want a "header" for the form fields and blank input boxes as they can be added dynamically and I don't want repeated form labels on each row.
• It would be nice to have a badgeColor on the input component badge, not just the <flux:badge>

Hopefully this makes sense. Let me know if you need more of a code explanation and I'll try to provide a slimmed down version of my Volt component.

PS: In the screenshot, I copied the underlying input badge look and colors to my <flux:badge>'s which you'll notice are slightly different from my original screenshot provided.