File

packages/components/layout/eui-toolbar/toolbar-item/toolbar-item.component.ts

Description

Individual toolbar item wrapper component for consistent spacing and styling of toolbar elements. Provides a standardized container for single toolbar actions, buttons, icons, or custom content. Content is projected via ng-content allowing flexible composition of any toolbar element. Automatically applies consistent spacing and alignment within the toolbar layout. Typically used within eui-toolbar-items to wrap individual buttons, icons, or interactive elements.

<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-items euiPositionRight>
        <eui-toolbar-item>
          <button euiButton>Action</button>
        </eui-toolbar-item>
        <eui-toolbar-item>
          <button euiIconButton icon="settings"></button>
        </eui-toolbar-item>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

• Provides consistent spacing for toolbar elements
• Content should be keyboard accessible
• Interactive elements must have proper focus states
• Maintains visual consistency across toolbar

Notes

• Must be used within eui-toolbar-items for proper layout
• Wraps individual toolbar elements (buttons, icons, etc.)
• Content projected via ng-content
• Automatic spacing and alignment applied
• Common content: buttons, icon buttons, custom controls
• Use one eui-toolbar-item per toolbar element
• Works with euiPositionRight directive on parent
• Provides consistent visual rhythm in toolbar

<ng-content />