eui documentation
  1. Components
  2. EuiTabComponent

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
Methods
Inputs

Inputs

e2eAttr
Type : string
Default value : 'eui-tab'

Data attribute used for end-to-end testing identification.
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 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 ""