The Spinner in Button with `isProcessing` prop should be colored according the Button color

[MiroslavPetrik]

• 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 colored button with a spinner:

<Button color="failure" isProcessing />

Current behavior

The internal Spinner has the default color.

Expected behavior

The internal Spinner has the darker shade of the button color.

Context

The Spinner looks off, as it appears unstyled.
The original flowbite does have only the default color button in loading mode, so this is undefined, but I believe it's best to style it.

Solution

I would use the theme prop, and supply a map of darker colors, e.g. instead of the default 600 I would use 800:

const innerSpinnerTheme: FlowbiteSpinnerTheme = {
 color: {
    failure: 'fill-red-800',
    gray: 'fill-gray-800',
    info: 'fill-cyan-800',
    pink: 'fill-pink-800',
    purple: 'fill-purple-800',
    success: 'fill-green-800',
    warning: 'fill-yellow-800',
  },
}

// Button.tsx
<Spinner color={color} theme={innerSpinnerTheme} />

[SutuSebastian]

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

Breaking changes:

• isProcessing is no longer a business logic of Button component, please build using composition strategy rather, see Loading Buttons example