### File

`packages/components/eui-overlay/eui-overlay.component.ts`

### Description

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

Example :

    <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

Example :

    <eui-overlay [isActive]="true" position="right" width="medium">
      <eui-overlay-content>Content</eui-overlay-content>
    </eui-overlay>

### With Click Outside to Close

Example :

    <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

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-overlay`
imports | `CdkTrapFocus`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-overlay.component.html`

### Index

###### Properties

- aria-label
- role

###### Methods

- onClick
- onKeydown

###### Inputs

- euiHighlighted
- fixedWidth
- hasClosedOnClickOutside
- isActive
- position
- width

###### Outputs

- activeState

###### HostBindings

- attr.aria-label
- attr.inert
- attr.role
- class

###### HostListeners

- document:click
- keydown

###### Accessors

- cssClasses
- inert

### Inputs

euiHighlighted
Type : `boolean`
Default value : `false`
Applies highlighted visual styling to emphasize the overlay. Adds distinct background or border treatment for visual prominence.

fixedWidth
Type : `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
Type : `boolean`
Default value : `false`
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
Type : `boolean`
Default value : `false`
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
Type : `string`
Default value : `'right'`
Screen position where the overlay appears. Determines the slide-in direction and alignment of the overlay panel. Common values: 'right', 'left', 'top', 'bottom'.

width
Type : `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
Type : `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.

### HostBindings

attr.aria-label
Type : `string`
Default value : `'dialogOverlay'`

attr.inert
Type : `string`

attr.role
Type : `string`
Default value : `'dialog'`

class
Type : `string`

### HostListeners

document:click
Arguments : `'$event'`
`document:click(event: MouseEvent)`

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`

### Methods

onClick
`onClick(event: MouseEvent)`
Decorators : `@HostListener('document:click', ['$event'])`

Parameters :

Name | Type | Optional
event | `MouseEvent` | No

Returns : `void`

onKeydown
`onKeydown(event: KeyboardEvent)`
Decorators : `@HostListener('keydown', ['$event'])`

Parameters :

Name | Type | Optional
event | `KeyboardEvent` | No

Returns : `void`

### Properties

aria-label
Type : `string`
Default value : `'dialogOverlay'`
Decorators : `@HostBinding('attr.aria-label')`

role
Type : `string`
Default value : `'dialog'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

inert
get `inert()`

# results matching ""

# No results matching ""