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

### Metadata

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

### Index

###### Properties

- avatarImage
- role

###### Inputs

- aria-label
- e2eAttr
- hasNoBackground
- hasShadow
- isFlat
- isReverse
- isShapeSquare

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

aria-label
Type : `string | null`
Default value : `'avatar'`
ARIA label for accessibility

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

isFlat
Type : `boolean`
Default value : `false`
Whether the avatar should have a flat appearance

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

class
Type : `string`
Gets the CSS classes to be applied to the host element. Combines base classes with modifier classes.

### Properties

avatarImage
Type : `QueryList<EuiAvatarImageComponent>`
Decorators : `@ContentChild(undefined)`

role
Type : `string`
Default value : `'status'`
Decorators : `@HostBinding('attr.role')`
ARIA role for accessibility

### Accessors

cssClasses
get `cssClasses()`
Gets the CSS classes to be applied to the host element. Combines base classes with modifier classes. Returns : `string`

# results matching ""

# No results matching ""