# EuiDimmerComponent

**Type:** component

<p>A dimming overlay component that provides a semi-transparent backdrop over page content.
Automatically integrates with browser navigation to manage dimmer state during back/forward actions.
Commonly used to indicate loading states, modal overlays, or to draw attention to specific UI elements.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dimmer [isDimmerActive]=&quot;isLoading&quot;&gt;&lt;/eui-dimmer&gt;</code></pre></div><h3>With Loading State</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// Component
isLoading = false;

loadData(): void {
  this.isLoading = true;
  this.dataService.fetch().subscribe(() =&gt; {
    this.isLoading = false;
  });
}

// Template
&lt;eui-dimmer [isDimmerActive]=&quot;isLoading&quot;&gt;&lt;/eui-dimmer&gt;
&lt;button (click)=&quot;loadData()&quot;&gt;Load Data&lt;/button&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Dimmer does not trap focus or block interaction by itself</li>
<li>Should be combined with modal dialogs or loading indicators for proper accessibility</li>
<li>Consider adding <code>aria-busy=&quot;true&quot;</code> to parent container when dimmer is active</li>
<li>Ensure keyboard users can still navigate when dimmer is visible</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically deactivates on browser back button navigation</li>
<li>Integrates with <code>EuiAppShellService</code> for centralized state management</li>
<li>Does not prevent user interaction - use with modal components for blocking behavior</li>
<li>Typically placed at root level of application for full-page coverage</li>
<li>CSS class <code>eui-dimmer--active</code> applied when active for custom styling</li>
</ul>


**Selector:** `eui-dimmer`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>E2E testing attribute for the component.</p>

- **isDimmerActive**: `boolean` - <p>Gets the active state of the dimmer.</p>

