# EuiOverlayComponent

**Type:** component



Modal overlay component that displays content in a layer above the main application.
Provides slide-in panel functionality with configurable positioning and width options.
Supports focus trapping, keyboard navigation, and click-outside-to-close behavior.
Implements ARIA dialog role for accessibility compliance.
Commonly used for side panels, drawers, settings menus, and contextual information displays.

### Basic Usage
```html
<eui-overlay [isActive]="showPanel" (activeState)="showPanel = $event">
  <eui-overlay-header>
    <h2>Panel Title</h2>
  </eui-overlay-header>
  <eui-overlay-content>
    <p>Panel content goes here</p>
  </eui-overlay-content>
  <eui-overlay-footer>
    <button euiButton (click)="showPanel = false">Close</button>
  </eui-overlay-footer>
</eui-overlay>
```

### Right Side Panel
```html
<eui-overlay [isActive]="true" position="right" width="medium">
  <eui-overlay-content>Content</eui-overlay-content>
</eui-overlay>
```

### With Click Outside to Close
```html
<eui-overlay [isActive]="true" [hasClosedOnClickOutside]="true">
  <eui-overlay-content>Dismissible content</eui-overlay-content>
</eui-overlay>
```

### Accessibility
- Uses `dialog` role for screen readers
- Traps focus within overlay when active
- Escape key closes overlay
- Inert attribute prevents interaction when inactive

### Notes
- Position options: 'right', 'left', 'top', 'bottom'
- Width can be responsive or fixed
- Automatically handles slide-in animations
- Use with overlay sub-components for structured layout


**Selector:** `eui-overlay`

## Inputs
- **euiHighlighted**: `boolean` - Applies highlighted visual styling to emphasize the overlay. Adds distinct background or border treatment for visual prominence.
- **fixedWidth**: `string` - Fixed width value for the overlay panel. Applies a specific width that does not respond to viewport changes. Overrides responsive width settings when specified.
- **hasClosedOnClickOutside**: `boolean` - Enables automatic closing when user clicks outside the overlay boundaries. Also applies slide-in animation from the right side. Useful for dismissible panels and temporary contextual menus.
- **isActive**: `boolean` - Controls the visibility and active state of the overlay. When true, displays the overlay with animation and enables interaction. When false, hides the overlay and applies inert attribute to prevent interaction.
- **position**: `string` - Screen position where the overlay appears. Determines the slide-in direction and alignment of the overlay panel. Common values: 'right', 'left', 'top', 'bottom'.
- **width**: `string` - Responsive width variant for the overlay panel. Applies predefined width classes that adapt to viewport size. Values correspond to CSS width modifier classes.

## Outputs
- **activeState**: `EventEmitter` - Emitted when the overlay's active state changes. Payload: boolean indicating the requested active state (typically false for close requests). Triggered by Escape key press or click outside when hasClosedOnClickOutside is enabled.