eui documentation
  1. Components
  2. EuiAvatarComponent

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
Methods
Inputs
HostBindings

Inputs

aria-label
Type : string | null
Default value : 'avatar'

ARIA label for accessibility
colorPalette
Type : string

Extra color palette to be used on the avatar.
e2eAttr
Type : string
Default value : 'eui-avatar'

Data attribute for E2E testing
hasNoBackground
Type : boolean
Default value : false

Whether the avatar should have no background color
hasShadow
Type : boolean
Default value : false

Whether the avatar should have a shadow effect
isReverse
Type : boolean
Default value : false

Whether the avatar reverse layout with content
isShapeSquare
Type : boolean
Default value : false

Whether the avatar shape should be square instead of circular

HostBindings

attr.role
Type : string
Default value : 'status'

ARIA role for accessibility

Methods

Public cssClasses
cssClasses()

Gets the CSS classes to be applied to the host element. Combines base classes with modifier classes.

Returns : string

The combined CSS classes

Properties

avatarImage
Type : QueryList<EuiAvatarImageComponent>
Decorators :
@ContentChild(undefined)
role
Type : string
Default value : 'status'
Decorators :
@HostBinding('attr.role')

ARIA role for accessibility

results matching ""

    No results matching ""