# EuiToolbarItemComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-app&gt;
  &lt;eui-app-toolbar&gt;
    &lt;eui-toolbar&gt;
      &lt;eui-toolbar-items euiPositionRight&gt;
        &lt;eui-toolbar-item&gt;
          &lt;button euiButton&gt;Action&lt;/button&gt;
        &lt;/eui-toolbar-item&gt;
        &lt;eui-toolbar-item&gt;
          &lt;button euiIconButton icon=&quot;settings&quot;&gt;&lt;/button&gt;
        &lt;/eui-toolbar-item&gt;
      &lt;/eui-toolbar-items&gt;
    &lt;/eui-toolbar&gt;
  &lt;/eui-app-toolbar&gt;
&lt;/eui-app&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provides consistent spacing for toolbar elements</li>
<li>Content should be keyboard accessible</li>
<li>Interactive elements must have proper focus states</li>
<li>Maintains visual consistency across toolbar</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-toolbar-items for proper layout</li>
<li>Wraps individual toolbar elements (buttons, icons, etc.)</li>
<li>Content projected via ng-content</li>
<li>Automatic spacing and alignment applied</li>
<li>Common content: buttons, icon buttons, custom controls</li>
<li>Use one eui-toolbar-item per toolbar element</li>
<li>Works with euiPositionRight directive on parent</li>
<li>Provides consistent visual rhythm in toolbar</li>
</ul>


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

**Standalone:** false
