# EuiAvatarComponent

**Type:** component



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
```html
<eui-avatar euiPrimary>
  <eui-avatar-text>JD</eui-avatar-text>
</eui-avatar>
```

#### Image avatar with badge
```html
<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
```html
<eui-avatar euiInfo [isShapeSquare]="true">
  <eui-avatar-icon iconSvgName="user:outline"></eui-avatar-icon>
</eui-avatar>
```

#### Avatar with content (name and email)
```html
<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


**Selector:** `div[euiAvatar], span[euiAvatar], eui-avatar`

## Inputs
- **aria-label**: `string | null` - ARIA label for accessibility
- **colorPalette**: `string` - Extra color palette to be used on the avatar.
- **e2eAttr**: `string` - Data attribute for E2E testing
- **hasNoBackground**: `boolean` - Whether the avatar should have no background color
- **hasShadow**: `boolean` - Whether the avatar should have a shadow effect
- **isReverse**: `boolean` - Whether the avatar reverse layout with content
- **isShapeSquare**: `boolean` - Whether the avatar shape should be square instead of circular
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]