Badge should have a color property

[rehandalal]

What problem does this feature solve?

Sometimes you want the Badge to be different colors. I tried following the example in the docs and when the Badge is not wrapped around an element setting the background color changes the color of the Badge:

When wrapped around a button however the background of the button changes to the expected color but not the Badge:

In this case I am using badge as status indicator --- green for good and red for bad.

What does the proposed API look like?

The proposed API would be similar to Tag or Button where you pass through a color property and that is used to set the color of the Badge.

Alternatively perhaps it should pass the className and style properties down to the .rs-badge-content element when the badge is wrapping an element.

[hiyangguo]

@rehandalal You can change color by this way:

1. Add a class to <Badge/>

<Badge className="green">
      <Button>New Message</Button>
    </Badge>

2. Add some styles

.rs-badge.green .rs-badge-content{
  background: #008000;
}

And we will consider your advice.Thank you for you feedback.

[rehandalal]

Thanks! This is what I am currently doing. But it would nice to have it just work out-the-box.

[hiyangguo]

We will consider how to realization it better in the subsequent version.

[hiyangguo]

@simonguo

[simonguo]

It can be designed to be consistent with the button color, while supporting custom colors.

[simonguo]

Supported in rsuite v5.

npm i rsuite@next