### File

`packages/components/eui-tabs/eui-tab-header/eui-tab-header-left-content.ts`

### Description

Content projection component for displaying custom content aligned to the left side of individual tab headers. Enables placement of icons, indicators, or leading visual elements within the tab header area. Automatically applies left-aligned styling for consistent positioning. Must be used within eui-tab-header to add left-aligned supplementary content to tabs.

### Basic Usage with Icon

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-left-content>
          <eui-icon-svg icon="eui-home" size="s" />
        </eui-tab-header-left-content>
        <eui-tab-header-label>Home</eui-tab-header-label>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### With Avatar

Example :

    <eui-tab-header>
      <eui-tab-header-left-content>
        <eui-avatar [imageUrl]="user.avatar" euiSizeXs />
      </eui-tab-header-left-content>
      <eui-tab-header-label>{{ user.name }}</eui-tab-header-label>
    </eui-tab-header>

### Accessibility

- Icons should have aria-label or aria-hidden
- Decorative content should use aria-hidden="true"
- Meaningful icons need descriptive labels

### Notes

- Positioned before the label text
- Commonly used for icons or avatars
- Maintains consistent spacing
- Supports any content (icons, badges, custom elements)

### Metadata

selector | `eui-tab-header-left-content`

template

    <ng-content />

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-tab-header-left-content'`

### Properties

string
Type : `string`
Default value : `'eui-tab-header-left-content'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""