# 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.



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

## Inputs
- **aria-label**: `string | null` - ARIA label for accessibility
- **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
- **isFlat**: `boolean` - Whether the avatar should have a flat appearance
- **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]]
- **euiAccent**: `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]]
