### File

`packages/components/eui-tabs/eui-tab/eui-tab.component.ts`

### Description

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

Example :

    <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

Example :

    <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

### Implements

`OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiVariant
selector | `eui-tab`

template

    <ng-content/>

### Index

###### Properties

- Public baseStatesDirective
- Public euiVariant$
- Public isActive
- Public isClosable$
- Public isDisabled$
- Public isVisible$
- templateBody
- templateHeader

###### Methods

- Public activateTab
- Public deactivateTab

###### Inputs

- e2eAttr
- euiVariant
- id
- isClosable
- isDisabled
- isHandleActivateTab
- isHandleCloseOnClose
- isVisible
- tooltip
- url

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-tab'`
Data attribute used for end-to-end testing identification.

euiVariant
Type : `string`
Default value : `'euiPrimary'`

id
Type : `string`
Unique identifier for the tab. Used for programmatic tab selection and tracking. Required for proper tab management and routing.

isClosable
Type : `boolean`
Default value : `false`
Enables a close button on the tab header for dismissible tabs. Allows users to remove or hide the tab from the tab bar.

isDisabled
Type : `boolean`
Default value : `false`
Disables the tab, preventing user interaction and selection. Applies disabled styling and blocks tab activation.

isHandleActivateTab
Type : `boolean`
Default value : `false`
Enables automatic tab activation when the tab is clicked. When false, tab activation must be handled externally.

isHandleCloseOnClose
Type : `boolean`
Default value : `false`
Enables automatic tab closure when the close button is clicked. When false, close button click must be handled externally.

isVisible
Type : `boolean`
Default value : `true`
Controls the visibility of the tab in the tab bar. When false, hides the tab from display without removing it from the DOM.

tooltip
Type : `string`
Tooltip text displayed when hovering over the tab header. Provides additional context or information about the tab content.

url
Type : `string`
URL or route path associated with the tab. Enables deep linking and browser history integration for tab navigation.

### Methods

Public activateTab
`activateTab()`
Returns : `void`

Public deactivateTab
`deactivateTab()`
Returns : `void`

### Properties

Public baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

Public euiVariant$
Type : `unknown`
Default value : `new BehaviorSubject(this.baseStatesDirective.euiVariant)`

Public isActive
Type : `unknown`
Default value : `false`

Public isClosable$
Type : `unknown`
Default value : `new BehaviorSubject(this.isClosable)`

Public isDisabled$
Type : `unknown`
Default value : `new BehaviorSubject(this.isDisabled)`

Public isVisible$
Type : `unknown`
Default value : `new BehaviorSubject(this.isVisible)`

templateBody
Type : `EuiTabBodyComponent`
Decorators : `@ContentChild(undefined)`

templateHeader
Type : `EuiTabHeaderComponent`
Decorators : `@ContentChild(undefined)`

# results matching ""

# No results matching ""