### File

`packages/components/eui-tabs/eui-tab-header/eui-tab-header-label.ts`

### Description

Primary label component for displaying the main text content within custom tab headers. Provides consistent styling for the principal tab title or heading. Serves as the primary identifier for the tab content when using custom header layouts. Must be used within eui-tab-header to provide structured label content.

### Basic Usage

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-label>Dashboard</eui-tab-header-label>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### With Other Header Elements

Example :

    <eui-tab-header>
      <eui-tab-header-left-content>
        <eui-icon-svg icon="eui-chart" />
      </eui-tab-header-left-content>
      <eui-tab-header-label>Analytics</eui-tab-header-label>
      <eui-tab-header-sub-label>Last 30 days</eui-tab-header-sub-label>
    </eui-tab-header>

### Accessibility

- Label text is the primary accessible name for the tab
- Should be concise and descriptive
- Avoid redundant text with icons

### Notes

- Applies consistent typography and spacing
- Primary text identifier for the tab
- Works with sub-label for hierarchical information

### Metadata

selector | `eui-tab-header-label`

template

    <ng-content />

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

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

### Properties

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

# results matching ""

# No results matching ""