Badge
Used to display the number of unread messages or status on icons or other components.
Usage
import { Badge } from 'rsuite';Examples
Basic
With content
Placement
Shapes
If the wrapped element is a circle, you can use the shape property circle to make the Badge position more reasonable.
Sizes
The Badge component supports different sizes through the size prop.
Offset
If the Badge position is not reasonable, you can use the offset property to make fine adjustments.
Invisible
Badge without children
Colors
Props
<Badge>
| Property | Type(Default) |
Description | Version |
|---|---|---|---|
| children | ReactNode | The wrapped component | |
| classPrefix | string ('badge') |
The prefix of the component CSS class | |
| color | Color | CSSProperties['color'] | Set the color of the badge | |
| compact | boolean | Whether to use compact mode |  |
| content | number | ReactNode | The content of the badge | |
| invisible | boolean | Whether the badge is invisible | |
| maxCount | number(99) |
Max count number（Only valid if content is type number） |
|
| offset | [number,number] | [string, string] | Define the horizontal and vertical offset of the badge relative to its wrapped element | |
| outline | boolean(true) |
Whether to use outline mode | |
| placement | PlacementCorners | Set the position of the badge in the wrapped element | |
| shape | 'rectangle' | 'circle' | The shape of the wrapped element | |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' ('md') |
Set the size of the badge |
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
PlacementCorners
type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';