# EuiAvatarComponent

**Type:** component

<p>Component for displaying avatars in the EUI design system.</p>
<p>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.</p>
<p>The component supports various customizations, including colors (via state directives),
sizes, shapes, and appearance modifiers.</p>
<h4>Text avatar</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar euiPrimary&gt;
  &lt;eui-avatar-text&gt;JD&lt;/eui-avatar-text&gt;
&lt;/eui-avatar&gt;</code></pre></div><h4>Image avatar with badge</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar euiSizeL&gt;
  &lt;eui-avatar-image src=&quot;user.jpg&quot; alt=&quot;John Doe&quot;&gt;&lt;/eui-avatar-image&gt;
  &lt;eui-avatar-badge euiSuccess&gt;&lt;/eui-avatar-badge&gt;
&lt;/eui-avatar&gt;</code></pre></div><h4>Icon avatar with square shape</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar euiInfo [isShapeSquare]=&quot;true&quot;&gt;
  &lt;eui-avatar-icon iconSvgName=&quot;user:outline&quot;&gt;&lt;/eui-avatar-icon&gt;
&lt;/eui-avatar&gt;</code></pre></div><h4>Avatar with content (name and email)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar&gt;
  &lt;eui-avatar-image src=&quot;user.jpg&quot;&gt;&lt;/eui-avatar-image&gt;
  &lt;eui-avatar-content&gt;
    &lt;eui-avatar-content-label&gt;John Doe&lt;/eui-avatar-content-label&gt;
```html
  &lt;/eui-avatar-content&gt;
&lt;/eui-avatar&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses role=&quot;status&quot; for screen reader announcements</li>
<li>aria-label provides context about the avatar (defaults to &quot;avatar&quot;)</li>
<li>Image avatars should include alt text via eui-avatar-image</li>
<li>Text avatars are automatically readable by screen readers</li>
<li>Badge status changes are announced when present</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Default shape is circular, use isShapeSquare for square avatars</li>
<li>Size variants: euiSizeXS, euiSizeS (default), euiSizeL, euiSizeXL, euiSize2XL</li>
<li>Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger</li>
<li>Use hasNoBackground to remove background color (useful for image avatars)</li>
<li>isReverse flips the layout when used with eui-avatar-content</li>
<li>colorPalette accepts custom color palette names for extended theming</li>
<li>hasShadow adds depth with shadow effect</li>
<li>euiOutline adds border outline styling</li>
</ul>


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

**Standalone:** false

## Inputs

- **aria-label**: `string | null` - <p>ARIA label for accessibility</p>

- **colorPalette**: `string` - <p>Extra color palette to be used on the avatar.</p>

- **e2eAttr**: `string` - <p>Data attribute for E2E testing</p>

- **hasNoBackground**: `boolean` - <p>Whether the avatar should have no background color</p>

- **hasShadow**: `boolean` - <p>Whether the avatar should have a shadow effect</p>

- **isReverse**: `boolean` - <p>Whether the avatar reverse layout with content</p>

- **isShapeSquare**: `boolean` - <p>Whether the avatar shape should be square instead of circular</p>

