### File

`packages/components/eui-avatar/avatar-badge/avatar-badge.component.ts`

### Description

Component representing an avatar badge. This badge can be positioned at the top or bottom of the avatar and is used to display additional information or status indicators.

The component uses content projection to allow any content to be displayed inside the badge.

Example :

    <eui-avatar>
        <eui-avatar-text>eUI</eui-avatar-text>
        <eui-avatar-badge>
            <eui-badge euiDanger euiSizeS>7</eui-badge>
        </eui-avatar-badge>
    </eui-avatar>

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-avatar-badge`

template

    <ng-content/>

styleUrl | `./avatar-badge.scss`

### Index

###### Properties

- cssClasses

###### Inputs

- isPositionBottom

### Inputs

isPositionBottom
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`
Whether the avatar should have a shadow effect

### Properties

cssClasses
Type : `unknown`
Default value : `computed(() => [ 'eui-avatar-badge', this.isPositionBottom() ? 'eui-avatar-badge--bottom' : 'eui-avatar-badge--top', ].join(' ').trim())`
Gets the CSS classes to be applied to the host element. Combines the base class with a modifier class based on the position.

# results matching ""

# No results matching ""