# EuiToolbarItemComponent

**Type:** component



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.

```html
<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


**Selector:** `eui-toolbar-item`