# EuiUserProfileComponent

**Type:** component



User profile component that displays user information with avatar, name, and optional dropdown menu.
Integrates with UserService to display current user state and supports impersonation indicators.
Provides customizable layouts for header, toolbar, or standalone usage.
Supports avatar display with initials, status indicators, and optional menu with navigation items.

### Basic Usage
```html
<!-- Simple user profile -->
<eui-user-profile
  [hasMenu]="true"
  [isShowAvatarInitials]="true">
  <eui-user-profile-menu>
    <eui-user-profile-menu-item (click)="viewProfile()">
      Profile
    </eui-user-profile-menu-item>
    <eui-user-profile-menu-item (click)="logout()">
      Logout
    </eui-user-profile-menu-item>
  </eui-user-profile-menu>
</eui-user-profile>

<!-- Header user profile -->
<eui-user-profile
  [isHeaderUserProfile]="true"
  [avatarUrl]="user.avatarUrl"
  [subInfos]="user.email" />
```

### Accessibility
- Avatar has appropriate alt text with user name
- Dropdown menu is keyboard accessible
- Status indicators have aria-label describing state
- Focus management for menu navigation

### Notes
- Automatically fetches user data from UserService
- Supports impersonation mode with visual indicator
- Avatar initials generated from user name when no image provided
- Status variants: success, secondary, danger
- Reverse layout option for right-to-left designs


**Selector:** `eui-user-profile`

## Inputs
- **avatarUrl**: `string` - 
- **dropContentWidth**: `string` - 
- **euiStatusDanger**: `boolean` - 
- **euiStatusSecondary**: `boolean` - 
- **euiStatusSuccess**: `boolean` - 
- **hasMenu**: `boolean` - 
- **hasTabNavigation**: `boolean` - 
- **hasToggle**: `boolean` - 
- **hasWelcomeLabel**: `boolean` - 
- **impersonateLabel**: `string` - 
- **isHeaderUserProfile**: `boolean` - 
- **isMobileOnly**: `boolean` - 
- **isReverse**: `boolean` - 
- **isShowAvatarInitials**: `boolean` - 
- **isShowUserInfos**: `boolean` - 
- **isToolbarUserProfile**: `boolean` - 
- **reverseNameOrder**: `boolean` - If true, the name will be displayed in reverse order (first name, first)
- **statusVariant**: `string` - 
- **subInfos**: `string` - 
- **welcomeLabel**: `string` - 
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]