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

<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

<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

<ng-content />