Badge
Used for buttons, numbers or status markers next to icons.
Usage
import { Badge } from 'rsuite';
//or
import Badge from 'rsuite/Badge';
Examples
Basic
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';