Badge
Used for buttons, numbers or status markers next to icons.
Usage
import { Badge } from 'rsuite';
//or
import Badge from 'rsuite/Badge';Examples
Default
With content
Invisible
Independent Use
Colorful indicator
color attribute sets the indicator style, options include: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'.
Props
<Badge>
| Property | Type(Default) |
Description |
|---|---|---|
| children | ReactNode | Be wrapped component |
| classPrefix | string ('badge') |
The prefix of the component CSS class |
| content | ReactNode | Content info |
| color | Color | A indicator can have different colors |
| maxCount | number(99) |
Max count number（Only valid if content is type number） |
ts:Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';