### File

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

### Description

Sub-label component for displaying secondary descriptive text within custom tab headers. Provides consistent styling for supplementary information below or alongside the main tab label. Typically contains additional context, counts, or status information related to the tab. Must be used within eui-tab-header to provide structured sub-label content.

### Basic Usage

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-label>Messages</eui-tab-header-label>
        <eui-tab-header-sub-label>12 unread</eui-tab-header-sub-label>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### With Dynamic Content

Example :

    <eui-tab-header>
      <eui-tab-header-label>Tasks</eui-tab-header-label>
      <eui-tab-header-sub-label>
        {{ completedTasks }} of {{ totalTasks }} completed
      </eui-tab-header-sub-label>
    </eui-tab-header>

### Accessibility

- Sub-label provides additional context to screen readers
- Should complement, not duplicate, the main label
- Keep text concise for better readability

### Notes

- Applies secondary text styling (smaller, lighter)
- Useful for counts, status, or metadata
- Positioned below or beside main label
- Optional - tabs work without sub-labels

### Metadata

selector | `eui-tab-header-sub-label`
template |
    <ng-content />

### Index

###### Properties
string
###### HostBindings
class

### HostBindings

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

### Properties

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

# results matching ""

# No results matching ""