Button not using primary color as default (using cyan as default)

[victorfunes]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Create a button without specifying the color:

        <Button type="button" size="lg">
          Siguiente: Confirmación
        </Button>

Current behavior

The button is using cyan as default:

<button type="button" class="group flex h-min items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none text-white bg-cyan-700 border border-transparent enabled:hover:bg-cyan-800 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800 rounded-lg focus:ring-2 w-full">
  <span class="flex items-stretch transition-all duration-200 rounded-md text-base px-5 py-2.5">
    Siguiente: Confirmación
  </span>
</button>

Expected behavior

The button should use primary as default:

<button type="button" class="group flex h-min items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none text-white bg-primary-700 border border-transparent enabled:hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:enabled:hover:bg-primary-700 dark:focus:ring-primary-800 rounded-lg focus:ring-2 w-full">
  <span class="flex items-stretch transition-all duration-200 rounded-md text-base px-5 py-2.5">
    Siguiente: Confirmación
  </span>
</button>

[rluders]

I was looking into this one, and it seems that Button doesn't have a primary color state. It uses by default the info... I notice that it also happens in other components, where we don't have a primary set... Is it desirable that all the components use primary and have all the FlowbiteColors available?

I'm asking 'cause it will change the scope of this task considerably. Also, it means that we will have to include primary in the FlowbiteColors interface. It doesn't actually exist there. So, with all that said, I'm removing the bug tag for this one, since it doesn't seem to be a bug, but... maybe an enhancement.

WDYT, @tulup-conner @victorfunes @zoltanszogyenyi ?

[victorfunes]

@rluders I have seen the same in other components too.
IMHO I would ask for this enhancement: otherwise, defining primary color seems to be strange if it is not going to be used by default, isn't it?

[rluders]

Yes, I got your point, and yes, I think that we should have primary color set, definitely, 'cause it is brand-related style. I know that @tulup-conner has some plans to work on some improvements in how we handle colors in flowbite with tailwindcss.

[dhensen]

I came here looking for the exact same thing reported. I bought flowbite pro and wanted to mix using Flowbite-react, with copy-paste html from flowbite pro blocks. The blocks use primary everywhere, but now I end up having to explicitly put in bg-primary everywhere and for every state as well.

Situation would definetly improve with having primary everywhere.

[dimaslanjaka]

same here, when i set color="primary" on my button, it showing white

my tailwind.config.cjs, i set color primary to cyan

theme: {
    colors: {
      primary: {
        50: '#42f5da',
        100: '#42f5da',
        200: '#42f5da',
        300: '#42f5da',
        400: '#42f5da',
        500: '#42f5da',
        600: '#42f5da',
        700: '#42f5da',
        800: '#42f5da',
        900: '#42f5da',
        light: '#42f5da',
        DEFAULT: '#42f5da',
        dark: '#42f5da'
      }
    }
}

my custom flowbite theme

{
   button: {
    color: {
      primary:
        'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
    },
    outline: {
      on: 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit'
    },
    size: {
      md: 'text-sm px-3 py-2'
    }
  }

my tsx page

<Button type="submit" color="primary">Submit</Button>

[SutuSebastian]

Fixed by #1498 in flowbite-react@0.11.0 release.

Please see Docs - Colors - Customizing Colors.