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

<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

<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)

<ng-content />