# EuiBlockDocumentComponent

**Type:** component



EuiBlockDocumentComponent creates a document overlay that can be toggled into
a blocked state. When blocked, a loading indicator is displayed.
Uses OnPush change detection strategy for better performance.

#### Typically placed at app root level
```html
<eui-block-document [isBlocked]="isProcessing"></eui-block-document>
```

#### Trigger blocking from component
```html
<button euiButton (click)="blockDocument()">Process Data</button>
```

```ts
import { EuiAppShellService } from '@eui/core';

private appShellService = inject(EuiAppShellService);
isProcessing = false;

blockDocument(): void {
  this.appShellService.isBlockDocumentActive = true;

  // Simulate async operation
  setTimeout(() => {
    this.appShellService.isBlockDocumentActive = false;
  }, 2000);
}
```

### Accessibility
- Uses role="region" for semantic landmark identification
- aria-label provides context about the blocked state
- Loading indicator is announced to screen readers
- Prevents interaction with underlying content when blocked
- Focus is trapped within the overlay during blocked state

### Notes
- Typically controlled via EuiAppShellService.isBlockDocumentActive property
- Creates full-page overlay when isBlocked is true
- Displays loading spinner automatically during blocked state
- Should be placed at application root level for full document coverage
- Use for long-running operations that require blocking entire UI
- Different from eui-block-content which blocks specific sections
- Automatically handles z-index to appear above all content
- Consider user experience - use sparingly for truly blocking operations


**Selector:** `eui-block-document`

## Inputs
- **ariaLabel**: `string` - ARIA label for the document component.
- **isBlocked**: `boolean` - Controls whether the document is in blocked state. When true, displays the loading indicator.