File

packages/components/eui-dimmer/dimmer.component.ts

Description

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

<eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>

With Loading State

// 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