# EuiOverlayHeaderComponent

**Type:** component

<p>Header component for eui-overlay that provides a structured top section.
Automatically detects and styles content based on the presence of a title component.
Typically contains title, close button, and optional action buttons.
Must be used as a direct child of eui-overlay to maintain proper layout structure.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-overlay [isActive]=&quot;true&quot;&gt;
  &lt;eui-overlay-header&gt;
    &lt;h2&gt;Overlay Title&lt;/h2&gt;
  &lt;/eui-overlay-header&gt;
&lt;/eui-overlay&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use heading elements for titles</li>
<li>Ensure close buttons have appropriate ARIA labels</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of <code>eui-overlay</code></li>
<li>Automatically styled based on content</li>
</ul>


**Selector:** `eui-overlay-header`

**Standalone:** false
