File

packages/components/eui-tabs/eui-tab-header/eui-tab-header-right-content.ts

Description

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

Basic Usage with Badge

<eui-tab>
  <eui-tab-header>
    <eui-tab-header-label>Notifications</eui-tab-header-label>
    <eui-tab-header-right-content>
      <eui-badge euiDanger>5</eui-badge>
    </eui-tab-header-right-content>
  </eui-tab-header>
  <eui-tab-body>Content</eui-tab-body>
</eui-tab>

With Multiple Elements

<eui-tab-header>
  <eui-tab-header-label>Tasks</eui-tab-header-label>
  <eui-tab-header-right-content>
    <eui-badge euiSuccess>3</eui-badge>
    <eui-icon-svg icon="eui-checkmark" size="xs" />
  </eui-tab-header-right-content>
</eui-tab-header>

Accessibility

• Badges should convey meaningful information
• Icons need aria-label if interactive
• Decorative elements use aria-hidden="true"
• Maintain logical tab order for interactive elements

Notes

• Positioned after the label text
• Commonly used for badges, counts, or status icons
• Maintains consistent spacing
• Supports multiple elements
• Does not interfere with close button placement

<ng-content />