UserBadge
v0.4.0
Role and status badge component with 5 built-in variants and custom badge support.
Status
Role Display
RTL-ready
Live Demo
All Variants
Click on any badge to see its variant
Author
Moderator
Verified
Admin
VIP
Installation
npm install noorui-rtlUsage
import { UserBadge } from 'noorui-rtl'
// Built-in variants
<UserBadge variant="author" />
<UserBadge variant="moderator" />
<UserBadge variant="verified" />
<UserBadge variant="admin" />
// Custom badge
<UserBadge variant="custom" label="VIP" icon={<Crown />} />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 |
Use Cases
- •User profiles showing role or status
- •Comment sections identifying authors and moderators
- •Leaderboards showing verified users
- •Chat systems highlighting admins and special users