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

Example :

    <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

Example :

    <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

### Metadata

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

template

    <ng-content />

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

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

### Properties

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

# results matching ""

# No results matching ""