eui documentation
  1. Components
  2. EuiOverlayComponent

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
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
getcssClasses()
inert
getinert()

results matching ""

    No results matching ""