feat(component): RoleBadge — Account Role Indicator

[bntvllnt]

Summary

Inline badge displaying a user's account role or tier with role-specific color coding. Supports standard roles (standard, admin, VIP, moderator) and custom roles. Useful in profile headers, user lists, and admin panels.

Proposed API

<RoleBadge role="admin" />
<RoleBadge role="vip" />
<RoleBadge role="standard" />
<RoleBadge role="moderator" color="#22c55e" />

// Custom roles
<RoleBadge role="beta-tester" color="#6366f1" />

Requirements

• Built-in role presets: standard (gray), admin (purple), vip (amber), moderator (green)
• Custom role support: any string + optional custom color
• Returns null when role is null, undefined, or "standard" (opt-in visibility)
• Optional showStandard prop to force display of standard role
• Compact inline badge (uses Badge base)
• Role label auto-capitalized from slug
• Dark mode: colored text on semi-transparent matching background
• Accessible: aria-label="Account role: Admin"

Visual States

┌──────────────────────────────────────────────────┐
│  Standard:  (hidden by default)                  │
│  Admin:     [Admin]       purple badge            │
│  VIP:       [VIP]         amber badge             │
│  Moderator: [Moderator]   green badge             │
│  Custom:    [Beta Tester] custom color badge       │
└──────────────────────────────────────────────────┘

Use Cases

• User profile header role display
• Admin panel user list role column
• Team member cards
• Comment/post author role indicator

Composes

• Badge

Origin

Extracted from AccountTypeBadge in apps/web-ai-os/app/account/billing/billing-client.tsx in vllnt/vllnt monorepo.