# EuiDimmerComponent

**Type:** component



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.

### Basic Usage
```html
<eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>
```

### With Loading State
```typescript
// Component
isLoading = false;

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

// Template
<eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>
<button (click)="loadData()">Load Data</button>
```

### Accessibility
- Dimmer does not trap focus or block interaction by itself
- Should be combined with modal dialogs or loading indicators for proper accessibility
- Consider adding `aria-busy="true"` to parent container when dimmer is active
- Ensure keyboard users can still navigate when dimmer is visible

### Notes
- Automatically deactivates on browser back button navigation
- Integrates with `EuiAppShellService` for centralized state management
- Does not prevent user interaction - use with modal components for blocking behavior
- Typically placed at root level of application for full-page coverage
- CSS class `eui-dimmer--active` applied when active for custom styling


**Selector:** `eui-dimmer`

## Inputs
- **e2eAttr**: `string` - E2E testing attribute for the component.
- **isDimmerActive**: `boolean` - Gets the active state of the dimmer.