# EuiTabComponent

**Type:** component



Individual tab component representing a single tab within eui-tabs navigation.
Manages tab state including active, disabled, visible, and closable states.
Supports custom header and body content through content projection.
Integrates with BaseStatesDirective for theming variants (primary, secondary, success, warning, danger).
Must be used as a direct child of eui-tabs component to participate in tab navigation.

### Basic Usage
```html
<eui-tabs>
  <eui-tab label="Overview">
    <eui-tab-body>
      <p>Overview content</p>
    </eui-tab-body>
  </eui-tab>

  <eui-tab label="Details" [isDisabled]="true">
    <eui-tab-body>
      <p>Details content</p>
    </eui-tab-body>
  </eui-tab>
</eui-tabs>
```

### With Custom Header
```html
<eui-tab [isClosable]="true" euiPrimary>
  <eui-tab-header>
    <eui-tab-header-left-content>
      <eui-icon-svg icon="eui-home" size="s" />
    </eui-tab-header-left-content>
    <eui-tab-header-label>Home</eui-tab-header-label>
    <eui-tab-header-right-content>
      <eui-badge euiInfo>3</eui-badge>
    </eui-tab-header-right-content>
  </eui-tab-header>
  <eui-tab-body>Content</eui-tab-body>
</eui-tab>
```

### Accessibility
- Tab has role="tab" automatically applied
- Associated panel has role="tabpanel"
- Disabled state prevents keyboard and mouse interaction
- Tooltip provides additional context on hover

### Notes
- Use isClosable for dismissible tabs
- isVisible controls display without removing from DOM
- Color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)
- Custom handlers via isHandleCloseOnClose and isHandleActivateTab
- URL property enables deep linking and routing integration


**Selector:** `eui-tab`

## Inputs
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.
- **id**: `string` - Unique identifier for the tab. Used for programmatic tab selection and tracking. Required for proper tab management and routing.
- **isClosable**: `boolean` - Enables a close button on the tab header for dismissible tabs. Allows users to remove or hide the tab from the tab bar.
- **isDisabled**: `boolean` - Disables the tab, preventing user interaction and selection. Applies disabled styling and blocks tab activation.
- **isHandleActivateTab**: `boolean` - Enables automatic tab activation when the tab is clicked. When false, tab activation must be handled externally.
- **isHandleCloseOnClose**: `boolean` - Enables automatic tab closure when the close button is clicked. When false, close button click must be handled externally.
- **isVisible**: `boolean` - Controls the visibility of the tab in the tab bar. When false, hides the tab from display without removing it from the DOM.
- **tooltip**: `string` - Tooltip text displayed when hovering over the tab header. Provides additional context or information about the tab content.
- **url**: `string` - URL or route path associated with the tab. Enables deep linking and browser history integration for tab navigation.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]