### 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.

Example :

    <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

### Metadata

selector | `eui-toolbar-item`
template |
    <ng-content />

### Index

###### Properties
string
###### HostBindings
class

### HostBindings

class
Type : `string`
Default value : `'eui-toolbar-item'`

### Properties

string
Type : `string`
Default value : `'eui-toolbar-item'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""