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

<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

<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

<ng-content />