Docs
Components
Dark
Light
System
An indicator for displaying status labels with predefined styles.
Use the placement prop to change the badge direction
placement
Use the status prop to change the badge status
status
Use the size prop to change the badge size
size
Use the animate prop to add a ping animation to the badge
animate
Type:
"online" | "offline" | "away" | "busy"
The status of the badge, one of 'online', 'offline', 'away', or 'busy'.
Default:
"md" | "lg"
The size of the badge, one of 'md', or 'lg'.
"right-top" | "right-bottom" | "left-top" | "left-bottom"
Placement of the badge relative to the element.
className
string
Optional className to be applied to the badge container.
badgeClassName
Optional custom class to be applied to the badge.
boolean
