eui documentation
  1. Components
  2. EuiUserProfileCardComponent

File

packages/components/eui-user-profile/user-profile-card/user-profile-card.component.ts

Description

User profile card component that displays detailed user information including avatar, name, function, and organization. Designed for use within dropdown menus or profile panels. Automatically fetches user data from UserService and supports impersonation display.

Basic Usage

Example :
<!-- Simple profile card -->
<eui-user-profile-card
  [isShowAvatarInitials]="true"
  (showProfileInfo)="onShowProfile()"
  (closeProfileMenu)="onClose()" />

<!-- With custom avatar -->
<eui-user-profile-card
  [avatarUrl]="user.avatarUrl"
  [reverseNameOrder]="true"
  showDetailsLabel="View Details" />
Example :
onShowProfile(): void {
  this.router.navigate(['/profile']);
}

Accessibility

  • Avatar has semantic meaning with user initials or image
  • Profile details link is keyboard accessible with tabindex
  • User information structured with proper heading hierarchy
  • Impersonation status clearly indicated for screen readers

Notes

  • Automatically displays user function and organization if available
  • Impersonation mode shows both impersonated and actual user
  • Avatar initials computed from user name (configurable order)
  • Integrates seamlessly with eui-user-profile dropdown

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-user-profile-card
imports EUI_AVATAR
templateUrl ./user-profile-card.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

avatarUrl
Type : string
impersonateLabel
Type : string
Default value : 'acting as'
isShowAvatarInitials
Type : boolean
Default value : true
reverseNameOrder
Type : boolean
Default value : false

If true, the name will be displayed in reverse order (first name, first)
showDetailsLabel
Type : string
Default value : 'Show profile details'

Outputs

closeProfileMenu
Type : EventEmitter<void>
showProfileInfo
Type : EventEmitter<void>

HostBindings

class
Type : string

Methods

onClose
onClose()
Returns : void
onShowInfoClick
onShowInfoClick()
Returns : void

Properties

avatarInitials
Type : Signal<string>
fullName
Type : Signal<literal type>

Holds the full name of the user and the impersonated user
isOnline
This property is not used anymore
Type : unknown
Default value : true

If true, the user is online
userState
Type : Signal<UserProfile>
Default value : inject(UserService).getSignal()

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""