More color possibility

[ftinkere]

I see wireui
It is somewhere weird... But I love it's buttons
Just set a color name (amber, teal, green, red, rose ...) and a button have it with all variations and I shouldn't write colors with important to each situation (hover, light, dark, focus) and make weird wrapper for flux button
And the light variant of colors is treat for the eyes

Can you give us something similar?

[jeffchown]

@ftinkere You can create buttons in any of the colours available for badges using the as="button" attribute for flux:badge.
e.g. <flux:badge color="cyan" as="button" size="lg" icon="plus">Cyan button</flux:badge>

and, more versions with the variant="solid", e.g.
<flux:badge color="cyan" variant="solid" as="button" size="lg" icon="plus">Cyan button</flux:badge>

This gives you easy access to all of these colours: https://fluxui.dev/components/badge#colors

[ftinkere]

Hm... type="submit" doesn't work on this variant(

[jeffchown]

@ftinkere You're right, looks like the type="" attribute is not being passed from flux:badge' to the wrapped flux:button`. That would be handy.

@joshhanley Can you please add this?

[joshhanley]

@jeffchown yup, submitted PR #1168 updating it

[robs007]

Adding a href doesn't seem to make it a link. Nothing happens when you click it. However, the href does show up in the html.
EX:

<flux:badge variant="solid"  as="button" size="lg" color="blue" href="https://waivers.skydivect.net/dashboard">Import Waiver</flux:badge>

<button type="button" class="inline-flex items-center font-medium whitespace-nowrap  [print-color-adjust:exact] text-sm py-1.5 **:data-flux-badge-icon:me-2 rounded-md px-2 text-white dark:text-white bg-blue-500 dark:bg-blue-600 [&amp;:is(button)]:hover:bg-blue-600 dark:[button]:hover:bg-blue-500" data-flux-badge="data-flux-badge" href="https://waivers.skydivect.net/dashboard">
        Import Waiver
    </button>

[jeffchown]

@robs007 This is a closed discussion and about something else, please start a new issue.
Also, flux:badge doesn't have a link/url option/attribute, see https://fluxui.dev/components/badge#reference
You have to wrap your badge in flux:link.

[joshhanley]

@ftinkere this isn't documented yet, but try

<flux:accent color="green">
    <flux:button variant="primary">Success!</flux:button>
</flux:accent>

[jeffchown]

@joshhanley Cool! And, based on the code, I assume all the theme color options (https://fluxui.dev/themes) are valid settings for color?

[joshhanley]

@jeffchown yep! Everything placed inside the accent component will receive that theme colour, so like radios, checkboxes, etc.

[jeffchown]

Very clever! Love having that in the toolbox.