File

packages/components/eui-tabs/eui-tabs-right-content/eui-tabs-right-content.component.ts

Description

Content projection component for displaying custom content aligned to the right side of the tabs header. Automatically positions content using flexbox with left margin auto for right alignment. Typically contains action buttons, filters, or supplementary controls related to tab content. Must be used as a direct child of eui-tabs component to maintain proper layout structure.

Basic Usage with Button

<eui-tabs>
  <eui-tab label="Tab 1">
    <eui-tab-body>Content 1</eui-tab-body>
  </eui-tab>
  <eui-tab label="Tab 2">
    <eui-tab-body>Content 2</eui-tab-body>
  </eui-tab>

  <eui-tabs-right-content>
    <button euiButton euiPrimary (click)="addTab()">
      Add Tab
    </button>
  </eui-tabs-right-content>
</eui-tabs>

With Multiple Controls

<eui-tabs>
  <!-- tabs here -->

  <eui-tabs-right-content>
    <eui-input-text placeholder="Filter..." />
    <button euiButton euiSecondary>
      <eui-icon-svg icon="eui-settings" />
    </button>
  </eui-tabs-right-content>
</eui-tabs>

Accessibility

• Controls should be keyboard accessible
• Buttons need descriptive labels or aria-labels
• Maintain logical tab order
• Interactive elements should have visible focus indicators

Notes

• Automatically aligned to the right of tab headers
• Does not interfere with tab navigation controls
• Useful for global actions affecting all tabs
• Supports any content (buttons, inputs, dropdowns)
• Positioned at the same level as tab headers

<ng-content/>