# EuiDashboardCardContentHeaderActionComponent

**Type:** component

<p>Action area for dashboard card headers, typically containing buttons or interactive elements.
Positioned at the end of the header for quick access to card-level actions.</p>
<h3>Single Action Button</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header-action&gt;
  &lt;eui-icon-button icon=&quot;eui-settings&quot; size=&quot;s&quot; aria-label=&quot;Card settings&quot;/&gt;
&lt;/eui-dashboard-card-content-header-action&gt;</code></pre></div><h3>Menu Button</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header-action&gt;
  &lt;eui-icon-button
    icon=&quot;eui-ellipsis-vertical&quot;
    euiRounded
    size=&quot;s&quot;
    aria-label=&quot;More options&quot;
    [euiPopover]=&quot;menu&quot;/&gt;
&lt;/eui-dashboard-card-content-header-action&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Always provide aria-label for icon-only buttons</li>
<li>Ensure buttons have sufficient touch target size</li>
<li>Use appropriate ARIA attributes for menus and dropdowns</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use within <code>eui-dashboard-card-content-header</code> component</li>
<li>Typically contains icon buttons for space efficiency</li>
<li>Positioned at the end of the header (right side in LTR)</li>
<li>Supports any interactive element: buttons, dropdowns, toggles</li>
</ul>


**Selector:** `eui-dashboard-card-content-header-action`

**Standalone:** false
