User
UserItem
Flat list row for users, companies, or businesses with avatar/icon, subtitle, badge, and actions slot.
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
<XAUserItem />
A flat list row suitable for displaying users, companies, or businesses inside menus, dropdowns, or list panels. Companies and businesses render a building/store icon instead of an avatar. Supports a badge next to the name, a description line, and a chevron for navigable items.
<!-- User -->
<XAUserItem name="John Doe" email="john@example.com" status="online" />
<!-- Company -->
<XAUserItem type="company" name="Acme Inc" subtitle="Technology" />
<!-- Business -->
<XAUserItem type="business" name="Local Coffee Shop" subtitle="123 Main St" />
<!-- Clickable with actions slot -->
<XAUserItem name="Jane" clickable @click="open">
<template #actions>
<UButton size="xs" icon="i-lucide-mail" variant="ghost" />
</template>
</XAUserItem>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | String | required | Display name. |
type | String | 'user' | Entity type — 'user', 'company', or 'business'. |
avatar | String | '' | Avatar image URL (users only). |
email | String | '' | Email shown as subtitle when no explicit subtitle is set. |
role | String | '' | Role shown as subtitle when no subtitle or email is set. |
subtitle | String | '' | Custom subtitle — overrides email and role. |
description | String | '' | Second line of detail text. |
status | String | '' | Online status dot — 'online', 'offline', 'away', or 'busy' (users only). |
badge | String | Object | null | Badge next to the name. Object form: { label, color, variant }. |
size | String | 'md' | Row size — 'sm', 'md', or 'lg'. |
clickable | Boolean | false | Adds hover background and emits click. |
selected | Boolean | false | Applies primary highlight background. |
showChevron | Boolean | true | Shows a right-chevron when clickable is true and no actions slot is provided. |
Events
| Event | Description |
|---|---|
click | Emitted when the row is clicked (requires clickable). |
AI Context
component: XAUserItem
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: User
use-when: Rendering a flat list row for users, companies, or businesses inside menus, dropdowns, or list panels. Companies and businesses render an icon instead of an avatar. Supports badge, subtitle, description, status, and an actions slot.
entity-types: [user, company, business]