### File

`packages/components/eui-avatar/eui-avatar.component.ts`

### Description

Component for displaying avatars in the EUI design system.

An avatar is a visual representation of a user or entity and can contain an image, text, or an icon. This component serves as the container for various avatar subcomponents, such as EuiAvatarImage, EuiAvatarText, EuiAvatarIcon, and EuiAvatarBadge.

The component supports various customizations, including colors (via state directives), sizes, shapes, and appearance modifiers.

#### Text avatar

Example :

    <eui-avatar euiPrimary>
      <eui-avatar-text>JD</eui-avatar-text>
    </eui-avatar>

#### Image avatar with badge

Example :

    <eui-avatar euiSizeL>
      <eui-avatar-image src="user.jpg" alt="John Doe"></eui-avatar-image>
      <eui-avatar-badge euiSuccess></eui-avatar-badge>
    </eui-avatar>

#### Icon avatar with square shape

Example :

    <eui-avatar euiInfo [isShapeSquare]="true">
      <eui-avatar-icon iconSvgName="user:outline"></eui-avatar-icon>
    </eui-avatar>

#### Avatar with content (name and email)

Example :

    <eui-avatar>
      <eui-avatar-image src="user.jpg"></eui-avatar-image>
      <eui-avatar-content>
        <eui-avatar-content-label>John Doe</eui-avatar-content-label>
    ```html
      </eui-avatar-content>
    </eui-avatar>

### Accessibility

- Uses role="status" for screen reader announcements
- aria-label provides context about the avatar (defaults to "avatar")
- Image avatars should include alt text via eui-avatar-image
- Text avatars are automatically readable by screen readers
- Badge status changes are announced when present

### Notes

- Default shape is circular, use isShapeSquare for square avatars
- Size variants: euiSizeXS, euiSizeS (default), euiSizeL, euiSizeXL, euiSize2XL
- Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
- Use hasNoBackground to remove background color (useful for image avatars)
- isReverse flips the layout when used with eui-avatar-content
- colorPalette accepts custom color palette names for extended theming
- hasShadow adds depth with shadow effect
- euiOutline adds border outline styling

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeXS euiSizeS euiSizeL euiSizeXL euiSize2XL euiSizeVariant euiOutline
host | `{ }`
selector | `div[euiAvatar], span[euiAvatar], eui-avatar`
templateUrl | `./eui-avatar.component.html`
styleUrl | `./eui-avatar.scss`

### Index

###### Properties
avatarImage
###### Inputs
ariaLabel colorPalette e2eAttr hasNoBackground hasShadow isReverse isShapeSquare

### Inputs

ariaLabel
Type : `string | null`
Default value : `'avatar', { alias: 'aria-label' }`
ARIA label for accessibility

colorPalette
Type : `string`
Default value : `''`
Extra color palette to be used on the avatar.

e2eAttr
Default value : `'eui-avatar'`
Data attribute for E2E testing

hasNoBackground
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Whether the avatar should have no background color

hasShadow
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Whether the avatar should have a shadow effect

isReverse
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Whether the avatar reverse layout with content

isShapeSquare
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Whether the avatar shape should be square instead of circular

### Properties

avatarImage
Type : `unknown`
Default value : `contentChild(EuiAvatarImageComponent)`
Reference to the projected EuiAvatarImageComponent, if present

# results matching ""

# No results matching ""