User
UserRoleBadge
Smart role badge that auto-maps role strings to colors with override support.
User
The User category provides a set of composable components for displaying user identity. XAUserCard and XAUserItem cover card and list-row contexts. XAUserMenu handles the navigation header avatar + dropdown pattern. XAUserRoleBadge renders role strings as colored badges with automatic color mapping. XAUser is a drop-in alias for XAUserCard.
Components
<XAUserRoleBadge />
A thin wrapper around UBadge that auto-maps common role strings (admin, owner, manager, member, guest, etc.) to semantic colors. The mapping can be extended or overridden per instance via colorMap and color props.
<!-- Auto-colored -->
<XAUserRoleBadge role="admin" />
<!-- Custom color override -->
<XAUserRoleBadge role="vip" color="success" />
<!-- Extend the default color map -->
<XAUserRoleBadge role="developer" :color-map="{ developer: 'primary' }" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
role | String | required | Role string to display and auto-map to a color. |
label | String | '' | Custom label text (defaults to formatted role value). |
color | String | '' | Override the auto-mapped color. |
colorMap | Object | {} | Additional role-to-color mappings merged with the built-in map. |
variant | String | 'soft' | Badge variant passed to UBadge. |
size | String | 'sm' | Badge size — 'xs', 'sm', or 'md'. |
badgeClass | String | '' | Additional CSS classes applied to the badge element. |
AI Context
component: XAUserRoleBadge
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: User
use-when: Rendering a role string as a color-coded badge anywhere in the UI. Has built-in color mappings for common roles (admin, owner, manager, member, guest). Extend with colorMap or override with color prop for custom roles. Automatically included by XAUserCard when a role is present.
built-in-roles: [admin, owner, manager, member, guest]