Badges
Small count and labeling indicators used to communicate numerical values, status, or categories. Badges are non-interactive and provide at-a-glance information.
Color Variants
DefaultPrimarySuccessWarningErrorInfo
Use semantic colors to convey meaning: success for completion, warning for attention needed, error for critical issues, info for informational content.
Soft Variants
DefaultPrimarySuccessWarningErrorInfo
Use
soft prop for a lighter, less prominent appearance. Ideal for secondary information.Sizes
Small
sm
Medium
md (default)
Large
lg
Dot Badges
Use the dot prop to create small status indicators without text.
Online
Away
Offline
Unknown
Small
Medium
Large
Usage Examples
Notification Count
3
12
99+
<div style={{ position: 'relative' }}>
<Button variant="secondary" iconOnly leftIcon={<BellIcon />} />
<Badge
size="sm"
variant="error"
style={{ position: 'absolute', top: -4, right: -4 }}
>
3
</Badge>
</div>Status Labels
ActiveUser account is verified and active
PendingWaiting for email verification
SuspendedAccount has been temporarily disabled
Best Practices
Do
Active
Use semantic colors for status
12
Keep badge content concise
Don't
This is a very long badge label
Don't use long text in badges
1234
Don't cluster many badges together