UserBadge
Role and status badge component with 5 built-in variants and custom badge support.
StatusRole DisplayRTL-ready
Live Demo
All Variants
Click on any badge to see its variant
AuthorModeratorVerifiedAdminVIP
Installation
Terminalbash
Usage
Reacttsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
variantRequired | 'author' | 'moderator' | 'verified' | 'admin' | 'custom' | undefined | Badge variant (author, moderator, verified, admin, or custom) |
label | string | undefined | Custom label text (required when variant is "custom") |
icon | React.ReactNode | undefined | Optional custom icon to override the default variant icon |
className | string | undefined | Additional CSS classes to apply |
Best Practices
Do
- ✓ Use consistent status colors across your application
- ✓ Include an accessible label for the status
- ✓ Keep badge text short (1-2 words)
Don't
- ✗ Don't use too many different status types in one view
- ✗ Don't rely on color alone — add text or icons for accessibility
- ✗ Don't use for decorative purposes